Книга: JavaScript. Подробное руководство, 6-е издание

19.2.3. Чтение и запись CSS-классов

19.2.3. Чтение и запись CSS-классов

Напомню, что значение атрибута class (в языке JavaScript доступного в виде свойства className) интерпретируется как список имен классов CSS, разделенных пробелами. Обычно бывает необходимо добавить, удалить или проверить присутствие какого-то одного имени в списке, тогда как потребность замещать один список классов другим возникает крайне редко. По этой причине в объекте jQuery определены удобные методы для работы с атрибутом class. Методы addClass() и removeClass() добавляют и удаляют классы в выбранных элементах. Метод toggleClass() добавляет классы в элемент, если они отсутствуют в нем, и удаляет их, если они присутствуют. Метод hasClass() проверяет присутствие указанного класса. Ниже приводятся несколько примеров использования этих методов:

$("h1").toggleClass("hilite", false); //

Добавить класс во все элементы <h1> Добавить 2 класса в <р> после <h1> Передать функцию, чтобы добавить вычисляемый класс во все выбранные элементы

Удалить класс из всех элементов <р> Допустимо удалять несколько классов Удалить вычисляемый класс из элем.

Удалить все классы из всех <div>

Добавить класс, если отсутствует, или удалить в противном случае Переключить сразу два класса Переключить вычисляемый класс или классы

Действует как addClass Действует как removeClass

Имеет ли какой-нибудь <р> этот класс? То же самое

is() - более гибкий, чем hasClass()

Обратите внимание, что метод hasClass() не такой гибкий, как методы addClass(), removeClass() и toggleClass(). Метод hasClass() может работать только с одним именем класса и не поддерживает возможность передачи ему функции. Он возвращает true, если хотя бы один из выбранных элементов содержит указанный класс, и false - в противном случае. Метод is() (описываемый в разделе 19.1.2) более гибкий и может использоваться для той же цели.

Эти методы объекта jQuery подобны методам свойства classList, о котором рассказывалось в разделе 16.5, но методы объекта jQuery работают во всех броузерах, а не только в тех, которые поддерживают свойство classList, определяемое стандартом HTML5. И, конечно же, методы объекта jQuery работают с множеством элементов и могут добавляться в цепочки вызовов методов.

Оглавление книги