—»     —»   Добавление и удаление HTML-классов по запросу при помощи jQuery
  Раздел: Скрипты и коды   Нет комментариев  

Добавление и удаление HTML-классов по запросу при помощи jQuery



Сегодня все разработчики умеют добавлять новые HTML-классы. Просто откройте HTML-документ, определите место, куда вы хотите добавить что-нибудь, впишите соответствующий код и задайте классу название. Но когда дело доходит до разработки интерактивного веб-сайта, который позволяет посетителям взаимодействовать с элементами дизайна, вам нужно уметь изменять, вставлять и удалять HTML-классы по требованию.

Добавление и удаление HTML-классов по запросу при помощи jQuery

Вы можете реализовать это при помощи jQuery. Эта простая функция добавляет и удаляет my-new-class к div-элементу.

// ## add class
$('div').addClass('my-new-class');

// ## remove class
$('div').removeClass('my-new-class');

Мы также можем реализовать это при помощи стандартного javascript-кода:

// add class
document.getElementById('elem').className = 'my-new-class';

// remove class
document.getElementById('elem').className = document.getElementByTag('div').className.replace( /(?:^|\s)my-new-class(?!\S)/g , '' )

Как видно, код, приведенный выше, менее понятен на первый взгляд, нежели вариант с использованием фреймворка jQuery. Но если вам не хочется полагаться на фреймворк, вы можете использовать javascript API под названием classList.

Применение API classList

Подобно jQuery, classList предоставляет нам набор методов, которые позволяют нам изменять HTML-классы.

В случае, когда у нас используется div-элемент с несколькими классами, мы можем извлечь классы, которые применены к div, при помощи classList.

var classes = document.getElementByID('elem').classList;
console.log(classes);

Если открыть Консоль браузера, то можно увидеть список классов.

Добавление и удаление HTML-классов по запросу при помощи jQuery

Чтобы добавить или удалить классы, мы можем воспользоваться .add() и .remove().

var elem = document.getElementByID('elem');

// add class
elem.classList.add('my-new-class');

// remove class
elem.classList.remove('my-new-class');

Добавление нескольких классов также реализуется за счет разделения классов запятой:

elem.classList.add('my-new-class', 'my-other-class');

Чтобы проверить, содержат ли конкретные элементы определенные классы, мы можем использовать .contains(). Эта функция вернет ответ true, если указанный класс присутствует, и false, если класс не будет найден.

elem.classList.contains('class-name');

Мы также можем переключать классы при помощи .toggle(). Следующий фрагмент кода показывает, каким образом мы привязываем метод .toggle() посредством события click.

var button = document.getElementById('button');
function toggle() {
elem.classList.toggle('bg');
}
button.addEventListener('click', toggle, false);

Ниже вы можете посмотреть демо.

Посмотреть демо | Скачать исходный код

В завершение

classList – это новый нативный javascript API, который был представлен вместе с HTML5. Он очень прост и надежен, и работает в следующих браузерах: Firefox 3.6, Opera 11.5 и Chrome 8, и Safari 5.1. Однако его поддержка отсутствует в браузерах IE9 и ниже, поэтому вам придется использовать Polyfills при реализации classList API в Internet Explorer.
Обнаружили ошибку или мёртвую ссылку?
Выделите проблемный фрагмент мышкой и нажмите CTRL+ENTER.
В появившемся окне опишите проблему и отправьте уведомление Администрации ресурса.
Нужна органическая вечная ссылка из данной статьи? Постовой?
Подробности здесь
Вам понравился материал? Поблагодарить легко!
Будем весьма признательны, если поделитесь этой статьей в социальных сетях:

Ключевые тэги: jQuery
Опубликовал Design FactoRy   Прочитано (раз): 5635   |   Нет комментариев
Автор перевода — CoolWebmasters.Com ©   |   Источник материала / оригинал статьи   Распечатать
Другие статьи и новости по теме:
Добавление комментария
Уважаемые пользователи!
При добавлении комментариев на сайт Вам следует учитывать следующее - все комментарии проверяются Администрацией на предмет отсутствия спама. При обнаружении признаков спама, в оставленном Вами комментарии, сам комментарий будет незамедлительно удалён, а Ваш IP-адрес будет забанен без предупреждения! Учётные записи пользователей, рассылающих спам, блокируются/удаляются без права последующего восстановления.

С уважением, Администрация сайта.
* = поля обязательны к заполнению
Полужирный Наклонный текст Подчеркнутый текст Зачеркнутый текст | Выравнивание по левому краю По центру Выравнивание по правому краю | Вставка смайликов Выбор цвета | Скрытый текст Вставка цитаты Преобразовать выбранный текст из транслитерации в кириллицу Вставка спойлера
Вопрос : Назовите месяц January по-русски
Подтверждение кода безопасности :

Включите эту картинку для отображения кода безопасности
обновить, если не виден код


Популярные публикации


















Свежие шаблоны сайтов каждый день
С миру по нитке
«    Июнь 2017    »
ПнВтСрЧтПтСбВс
 1234
567891011
12131415161718
19202122232425
2627282930