В этом статье я расскажу как можно узнать класс HTML элемента по его ID или проверить, есть ли такой класс у элемента. Кроме того, что мы можем узнать и взять class элемента, мы можем с помощью данного метода узнать и получить любой другой атрибут элемента.
Проверка класса элемента
Как мы знаем все HTML элементы могут иметь атрибут class, который может иметь несколько значение перечисленные пробелом.
<!DOCTYPE html> <html lang="ru"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Мой сайт</title> </head> <body> <div id="blockId" class="myClass1 myClass2">Здесь могут быть вложенные HTML элементы.</div> <!-- Подключаем библиотеку jQuery --> <script src="./jquery.min.js"></script> <!-- Подключаем наш файл скриптов --> <script src="./script.js"></script> </body> </html>
И так, у нас в HTML коде есть элемент div, который имеет два класса — myClass1, myClass2. У нас есть задача — проверить с помощью jQuery есть ли у элемента определенный класс по его ID. Это можно сделать с помощью метода .hasClass(). Например, если мы хотим узнать есть ли у элемента класс myClass2, то мы делаем следующую проверку.
if ( $("#blockId").hasClass("myClass2") ) { alert("У элемента задан класс myClass2!"); }
Метод .hasClass() всегда возвращает значение типа boolean. То есть, если у нас есть такой класс, то будет возвращен булевое значение true и проверка пройдет успешно. В нашем случае мы увидим сообщение «У элемента задан класс myClass2!».
Очень часто начинающие разработчики используют метод .attr() для проверки / сравнение классов. Но данный метод проверки будет работать неправильно, если атрибут класс имеет несколько значение. Пример кода ниже написан неправильно.
if ( $("#blockId").attr("class") == "myClass2" ) { alert("Неправильный вариант проверки!"); }
Узнать / получить значение класса элемента
Выше я уже рассказал, что с помощью метода .attr() нельзя проверить или сравнить значение атрибут class, но с помощью этого метода можно получить значение атрибутов. Если элемент имеет один класс, то мы можем получить его и использовать без дополнительных действий.
var classData = $("#blockId").attr("class"); alert(classData);
Но если элемент имеет несколько классов, то нужно разбить полученную строку на массив:
var theClasses = classData.match(/\w+|"[^"]+"/g);
С помощью этого метода можно узнать и получить значение любого атрибута.
Комментарии