Проверить наличие класса javascript

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

В этой совсем небольшой статье я расскажу, как с помощью jQuery проверить наличие класса у элемента. Любой HTML-элемент всегда может иметь более одного класса. Все классы, назначенные элементу, перечисляются через пробел в атрибуте class элемента, как показано ниже:

В этом примере для DIV-элемента установлено два класса — sizeable и draggable. Если нам необходимо проверить, задан ли определенный класс для какого-то элемента, то на jQuery это делается с помощью метода hasClass(). Так, если мы хотим узнать, есть ли у нашего DIV-а класс sizeable, мы делаем следующую проверку:

После выполнения этого кода на экран будет выведено сообщение "У элемента задан класс sizeable!". Иногда начинающим разработчикам jQuery хочется использовать метод attr() библиотеки jQuery, чтобы сравнить значение атрибута class элемента с каким-то классом, что в корне неверно. Например, следующий код написан неправильно:

Никогда не проверяйте наличие класса у элемента с помощью метода attr()! Этот код не будет работать. Всегда используйте метод hasClass()

Поскольку по спецификации HTML у любого элемента может быть несколько классов, то вполне понятно, почему attr() здесь не срабатывает — этот метод используется для чтения или установки тех атрибутов элемента, которые имеют единственное значение. Такими могут быть, например, атрибуты id, title и т.д. Если необходимо проверить наличие нескольких классов у элемента, придется использовать метод hasClass() для проверки каждого класса. Например, если мы хотим узнать, заданы ли оба класса у элемента, то используем следующий код:

Если же хотим проверить наличие хотя бы одного из двух классов, то проверяем так:

В рамках данной статье мы поговорим о простых, но важных мелочах в арсенале каждого разработчика — в частности, организуем проверку на наличие того или иного класса в одном из элементов, которых в нем может быть сразу несколько.

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

Способов будет два, и каждый из них тестируется на вот такой вот конструкции:

Проверяем наличие класса у элемента на jQuery

jQuery — библиотека JavaScript, фокусирующаяся на взаимодействии JavaScript и HTML, и, чтобы проверить наличие класса в её элементах необходимо использовать метод hasClass.

Вот как это делается:

Проверка отсутствия класса выполняется с добавлением знака восклицания:

Если действие выполнено успешно, это значит, что указанный класс в элементе отсутствует.

Проверяем наличие класса у элемента на JavaScript

Если проверить нужно в JavaScript, код немного больше, но принцип его работы схож с вышеупомянутой jQuery. Вот так выглядит проверка на наличие класса:

Соответственно, по аналогии с вариантом выше, проверка на отсутствие:

Как мы уже говорили, это мелочи, но знать такую информацию должен каждый веб-разработчик.

рекомендованная Статья

рекомендованная Статья2

Многие популярные CMS, такие, как WordPress и Data Life Engine, предлагают в качестве базы данных использовать InnoDB, мотивируя это скоростью…

В этой записи я расскажу как с помощью JavaScript добавить или изменить атрибут class для элементов страницы. Часто этот метод используют для создания динамических элементов страницы. Чтобы в JavaScrip добавить, удалить, переключить или проверить класс элемента используют методы, которые содержит свойство classList :

• classList.add
• classList.remove
• classList.toggle
• classList.contains
• classList.length
• classList.item

Добавить класс

classList.add — добавить класс элемента.

В примере я использую метод classList.add чтобы добавить класс style для для элемента

Удалить класс

classList.remove — удалить класс элемента.

В примере я использую метод classList.remove чтобы удалить класс style для для элемента

Переключить класс

classList.toggle — добавить имя класса, если его нет, или удалить, если он есть.

В примере я использую метод classList.toggle чтобы добавить класс style для для элемента

Или удалить класс style , если он есть:

Проверить наличие класса

classList.contains — возвращает логическое значение, указывающее, имеет ли элемент указанный класс или нет.

В примере я использую метод classList.contains чтобы добавить класс style для для элемента

Количество классов

classList.length — возвращает количество классов в элементе.

В примере я использую метод classList.length чтобы получить количество классов для для элемента

Узнать имя класса

classList.item — возвращает имя класса по его порядковому номеру.

• number — порядковый номер класса.

«>