Как узнать класс элемента js
Перейти к содержимому

Как узнать класс элемента js

  • автор:

Как проверить наличие класса у элемента в JavaScript

Чтобы проверить наличие класса у элемента при помощи JavaScript, воспользуйтесь методом classList.contains :

Скопировать код

if (element.classList.contains('my-class')) < // �� Класс присутствует, можно отметить это! >

Поддержка старых браузеров: Привет, старым друзьям!

Если в работе необходимо использовать старые браузеры, которые не поддерживают classList , то можно прибегнуть к альтернативным решениям. Например, написать функцию-помощник, используя свойство className и метод indexOf :

Скопировать код

function hasClass(element, className) < return (' ' + element.className + ' ').indexOf(' ' + className + ' ') >-1; > if (hasClass(element, 'beloved-old-class')) < // �� Отлично, нам удалось обнаружить следы динозавров! >

Такой подход обеспечивает максимальную совместимость с различными версиями браузеров.

Проверка нескольких классов: Чем больше, тем веселее!

Если задача стоит в проверке наличия нескольких классов, отлично подойдет применение цикла for в сочетании с методом classList.contains :

Скопировать код

var classesToCheck = ['class1', 'class2', 'class3']; for (var i = 0; i < classesToCheck.length; i++) < if (element.classList.contains(classesToCheck[i])) < // �� Найден хотя бы один класс! Пора наслаждаться своим статусом короля классов! break; >>

Простота подхода и эффективность работы оставят вас довольными.

Сложные селекторы: Раскройте мощь matches

Для проверки соответствия элемента селекторам, включая классы, пригодится метод Element.matches() :

Скопировать код

if (element.matches('.fancy-class')) < // �� Элемент и класс '.fancy-class' теперь как будто пара! >

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

Измерение производительности: Необходимость в скорости

Герои фильмов о гонках скажут: «Не важно, на сколько ты победил, главное — выигрыш». Но в мире кода каждая милисекунда имеет значение. Сравните classList.contains и indexOf :

  • Тест на пределе: https://jsben.ch/U3CpX
  • График победы: https://i.stack.imgur.com/8kWMd.png

Помните: даже скорость Молнии Маккуина отличается от трассы к трассе.

Полифилы: Ностальгия по classList

Чтобы поддерживать старые браузеры, полифил может добавить им возможности classList , современные к нашему времени:

Скопировать код

// Возвращаемся в будущее с помощью classList if (!("classList" in document.createElement("_"))) < Object.defineProperty(HTMLElement.prototype, 'classList', < // Ваш код будет здесь. >); >

Изучите подробности — полифил classList.js от Eli Grey, чтобы получить полное понимание.

Визуализация

Попробуем изобразить, как element содержит класс в JavaScript, представив шкаф с лучшими нарядами:

Шкаф Есть наряд?
Повседневные рубашки �� �� ��️
Вечерние платья �� �� ��
Спортивные костюмы ��️ �� ��
Стильный костюм

Скопировать код

const outfitExists = element.classList.contains('stylish-outfit');

Ищем «Стильный костюм»:

Проверка Результат
outfitExists ✅ / ❌

�� Есть ( ✅ ): На вас шикарный наряд! �� Нет ( ❌ ): Пора обновить гардероб!

Никаких ложных срабатываний

Используя classList.contains , мы минимизируем риск ложных срабатываний, которые могут возникнуть при использовании indexOf . Не путайте классы .btn и .btn-large — они отличаются так же, как и нюансы вашего кода!

Особый подход к SVG

Для работы с SVG элементами classList станет надежным помощником. В случае SVG свойство className может работать не так, как ожидали, особенно в старых браузерах.

Работа с классами в популярных фреймворках

Пользователям React, Angular и Vue стоит отметить, что эти фреймворки предлагают свои собственные решения для работы с классами. Их встроенные подходы лучше совместимы с реализацией виртуального DOM, поэтому рекомендуется использовать именно их.

Полезные материалы

  1. Свойство Element: classList – Web API | MDN
  2. Проверка наличия класса у элемента – Stack Overflow
  3. Основы синтаксиса классов – JavaScript.info
  4. Метод DOMTokenList: contains() – Web API | MDN
  5. Классовый API HTML5 – David Walsh Blog
  6. Метод .hasClass() | jQuery API Документация —

jQuery — метод hasClass(), или проверяем наличие класса у элемента

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

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

if ( $(«#myPanel»).hasClass(«sizeable») ) < alert("У элемента задан класс sizeable!"); >

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

if ( $(«#myPanel»).attr(«class») == «sizeable» ) < // сюда мы никогда не попадем! alert("Это сообщение не отобразится, т.к. нельзя проверять наличие класса у элемента с помощью метода attr()!"); >

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

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

if ( $(«#myPanel»).hasClass(«sizeable») && $(«#myPanel»).hasClass(«draggable») ) < alert("У элемента заданы оба класса: sizeable и draggable!"); >

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

if ( $(«#myPanel»).hasClass(«sizeable») || $(«#myPanel»).hasClass(«draggable») ) < alert("У элемента задан какой-то из классов: sizeable или draggable!"); >

Element.className

Свойство className отвечает за значение атрибута class элемента.

Примечание: Кстати, у className есть большой брат. Его зовут element.classList — более мощный и функциональный метод для работы с классами элемента.

Синтаксис

var cName = elem.className; elem.className = cName;
  • cName — строка. Если нужно указать несколько классов, они указываются через пробел.

Пример

var elm = document.querySelector("div"); alert(elm.className); //"booble example" elm.className = "class1 class2 class3"; alert(elm.className); //"class1 class2 class3" 

Примечание: ##### Примечание:Свойство получило необычное название className из-за того, что во многих языках, работающих с DOM, слово class является зарезервированным*.*

Совместимость с браузерами

BCD tables only load in the browser

Спецификация

Смотрите также

Found a content problem with this page?

  • Edit the page on GitHub.
  • Report the content issue.
  • View the source on GitHub.

This page was last modified on 6 янв. 2024 г. by MDN contributors.

Your blueprint for a better internet.

MDN

Support

  • Product help
  • Report an issue

Our communities

Developers

  • Web Technologies
  • Learn Web Development
  • MDN Plus
  • Hacks Blog
  • Website Privacy Notice
  • Cookies
  • Legal
  • Community Participation Guidelines

Visit Mozilla Corporation’s not-for-profit parent, the Mozilla Foundation.
Portions of this content are ©1998– 2024 by individual mozilla.org contributors. Content available under a Creative Commons license.

Element: свойство classList

Element.classList — это доступное только для чтения свойство, которое содержит текущую коллекцию DOMTokenList всех атрибутов class элемента.

Использование classList представляет более удобный способ, чем доступ к списку классов элемента в виде строки, разделенной пробелами, через element.className .

Значение

DOMTokenList представляет содержимое атрибута class элемента. Если атрибут class не установлен или пуст, то будет возвращён пустой DOMTokenList , то есть DOMTokenList со свойством length равным 0 .

Хотя само свойство classList доступно только для чтения, можно изменять связанный с ним DOMTokenList с помощью методов add() (en-US), remove() (en-US), replace() и toggle() (en-US).

Для проверки, содержит ли элемент какой-либо класс можно использовать метод classList.contains() (en-US).

Примеры

const div = document.createElement("div"); div.className = "foo"; // Начальное состояние: console.log(div.outerHTML); // Используем classList API для удаления и добавления классов div.classList.remove("foo"); div.classList.add("anotherclass"); // console.log(div.outerHTML); // Если класс "visible" присутствует в списке классов, то он будет удалён, а иначе наоборот добавлен div.classList.toggle("visible"); // Добавление/удаление класса "visible" в зависимости от условия, передаваемого вторым аргументом div.classList.toggle("visible", i  10); // false console.log(div.classList.contains("foo")); // Добавление или удаление нескольких классов сразу div.classList.add("foo", "bar", "baz"); div.classList.remove("foo", "bar", "baz"); // Добавление или удаление нескольких классов с использованием spread-синтаксиса const cls = ["foo", "bar"]; div.classList.add(. cls); div.classList.remove(. cls); // Замена класса "foo" классом "bar" div.classList.replace("foo", "bar"); 

Спецификации

Specification
DOM Standard
# ref-for-dom-element-classlist①

Совместимость с браузерами

BCD tables only load in the browser

Смотрите также

  • element.className
  • DOMTokenList
  • classList.js (кросс-браузерный полифил, реализующий функциональность element.classList )

Found a content problem with this page?

  • Edit the page on GitHub.
  • Report the content issue.
  • View the source on GitHub.

This page was last modified on 10 дек. 2023 г. by MDN contributors.

Your blueprint for a better internet.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *