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.
Проверить наличие класса у элемента
Как проверить наличие у элемента класса CSS БЕЗ Jquery
Подскажите как проверить наличие у элемента класса CSS БЕЗ использования Jquery? хочу написать.
Как проверить наличие элемента и если он есть удалить его по клику
Приветствую, у меня есть код: var modalbtn=document.querySelectorAll(".modal__btn"); for (var i =.
Как проверить наличие одного элемента в другом?
Необходимо перебрать все элементы массива liMenu и, в случае, если элемент массива содержит.
Проверить наличие класса у дочерних элементов через путешествие по DOM
Доброго времени суток. Возникла такая задача, есть несколько блоков <section> <div.
707 / 309 / 191
Регистрация: 05.03.2015
Сообщений: 822
Сразу несколько ошибок. Сначала рабочий код:
1 2 3 4 5
var d = document.getElementsByClassName("btn")[0]; if (d.classList.contains("checked")) { alert("ура"); }
Ошибки:
1) document.getElementByClassName — такого селектора нет, есть getElementsByClassName, возвращающий массивоподобный объект.
2) hasClassName — такого метода тоже не существует. Однако альтернатив много: приведенный в коде выше, d.className.indexOf(«checked») !== -1 или jquery метод $(el).hasClass(‘checked’)
2.2) Все варианты проверки классов выше (существуют еще, но тем не менее) проверяют наличие классов БЕЗ точки.
3? после алерта страница перезагрузится. Скорее всего вам нужно будет от этого избавиться, так что смотрите в сторону метода event.preventDefault()
87844 / 49110 / 22898
Регистрация: 17.06.2006
Сообщений: 92,604
Помогаю со студенческими работами здесь
Проверить наличие текста до и после элемента
Здравствуйте. Не могу победить возникшую задачу. Мне необходимо перед и после блока с классом.
Проверить наличие объекта класса
Есть класс. Можно ли как-то узнать, есть ли уже созданный объект этого класса? Как?
Как проверить наличие элемента в массиве
Есть предупреждение NOTICE: UNDEFINED INDEX: 10 IN TEST.PHP ON LINE 27 Как заранее проверить.
Как проверить наличие элемента в XML
При парсинге XML файла необходимо проверить есть ли элемент <keywords>. При запуске файла второй.
Или воспользуйтесь поиском по форуму:
Как правильно проверить наличие css класса у дочерних элементов с помощью jquery?
Но почему-то этот способ не срабатывает. В чем может быть проблема?
- Вопрос задан более трёх лет назад
- 374 просмотра
Комментировать
Решения вопроса 1
Danny Arty @DanArst Куратор тега JavaScript
Гриффиндор в моде при любой погоде!
Ответ написан более трёх лет назад
pofeg @pofeg Автор вопроса
проблема в том что таких элементов одинаковых на странице несколько и мне нужно использовать this
Danny Arty @DanArst Куратор тега JavaScript
проблема в том что таких элементов одинаковых на странице несколько
это не проблема. то, что я предложил будет работать с каждым таким элементов, а не только с первым
мне нужно использовать this
это обязательное условие задачи?
pofeg @pofeg Автор вопроса
Danny Arty, Не работает ваш метод. Он просто никак не реагирует.
Danny Arty @DanArst Куратор тега JavaScript
pofeg, отлично работает. В примере ниже сделал background: red; для li с классом active для наглядности. Вы jquery подключили?
Проверить наличие CSS класса в javascript
Как проверить наличие или отсутствие класса у элемента на чистом javascript? Необходимо добавить класс элементу по клику, но при этом проверить наличие у него этого класса перед добавлением, чтобы класс не дублировался. вот код:
var cells = document.getElementsByTagName('td'); for(var i=0; i function selectDate()
ссылка на полный код jsfiddle
Отслеживать
2,129 1 1 золотой знак 13 13 серебряных знаков 21 21 бронзовый знак
задан 4 дек 2015 в 11:51
1,549 8 8 золотых знаков 24 24 серебряных знака 51 51 бронзовый знак
4 ответа 4
Сортировка: Сброс на вариант по умолчанию
Вам поможет метод classList.contains вместо className
contains ( String )
Проверяет, есть ли данный класс у элемента (вернет true или false)
использовать можно так:
if(this.classList.contains('active')) где this должен быть html-элементом.
Отслеживать
ответ дан 4 дек 2015 в 11:57
81.1k 9 9 золотых знаков 78 78 серебряных знаков 135 135 бронзовых знаков
Отличная штука. Не знал. Спасибо
4 дек 2015 в 11:59
@tutankhamun, они постепенно расширяют интерфейсы дом элементов 🙂
4 дек 2015 в 12:00
Так скоро jQuery не понадобится в 95% случаев, в который он сейчас почти необходим 🙂
4 дек 2015 в 12:05
@tutankhamun, а в каких например он сейчас почти необходим?
4 дек 2015 в 12:06
Я вот уже и не уверен, что знаю ответ на ваш вопрос 🙂 Внедрение document.querySelector() и document.querySelectorAll() очень сильно подорвало фундамент jQuery. Получается что в сухом остатке только поддержка старых браузеров
4 дек 2015 в 12:12
Можно воспользоваться следующей функцией:
function hasClass(element, className)
Плюс такого решения — работает даже на древних браузерах
Отслеживать
ответ дан 4 дек 2015 в 11:58
tutankhamun tutankhamun
11.4k 5 5 золотых знаков 26 26 серебряных знаков 40 40 бронзовых знаков
пока сложновато для меня. это чистый js?
4 дек 2015 в 12:01
@MarinaVoronova, чище некуда 🙂
4 дек 2015 в 12:01
сделала так — по клику добавляется класс и удаляется при повторном клике. вот код:
var cells = document.getElementsByTagName('td'); for(var i=0; i function selectDate()< if(this.classList.contains('active'))< this.classList.remove('active'); >else < this.classList.add('active'); >> ссылка на полный код: jsfiddle
Отслеживать
2,129 1 1 золотой знак 13 13 серебряных знаков 21 21 бронзовый знак
ответ дан 11 дек 2015 в 3:58
1,549 8 8 золотых знаков 24 24 серебряных знака 51 51 бронзовый знак
Вместо того, чтобы городить такой if, раз уж Вы используете classList , можно воспользоваться готовой функцией: classList.toggle(‘active’) . И совет, ставить обработчики в цикле не хорошо, лучше повесить его на родителя, так шустрее будет работать.
11 дек 2015 в 7:37
спасибо, сработало)
11 дек 2015 в 8:58
Вместо того, что у Вас в selectDate()<> надо написать проcто this.classList.toggle(‘active’)
11 дек 2015 в 8:58
да, я уже применила jsfiddle.net/lilubanana/fwxuf5ea/29
11 дек 2015 в 8:59
и еще, для понимания, могу я использовать функцию toggle если не подключена jquery? у меня все работает, но если браузер будет старый?
11 дек 2015 в 10:09
Если нужно проверить именно наличия класса то используйте такую конструкцию
!!~elem.getAttribute("class").indexOf("my__class") classList.toggle('active') добавляет класс при его отсутствие и удаляет при его наличии.
parent.contains(child) Возвращает true, если parent содержит child или parent == child То есть если у нас несколько child то придется проверять в цикле. Да и опять же вложенность
Отслеживать
ответ дан 27 янв 2020 в 8:24
Дмитрий Бабанин Дмитрий Бабанин
33 6 6 бронзовых знаков
!!~elem.getAttribute(«class»).indexOf(«my__class») — плохой вариант, например зацепит my__class1 , ну и читаемость ужасная лучше обычный if, чем !!~
27 янв 2020 в 16:04
1. js насколько я знаю все задачи делаются для определенной цели. Если конечно у человека будут в одном элементе содержать классы active + no-active + active-elem. То да. Нужно делать через регулярки. 2. Вы вообще знаете для чего конструкция предназначена !!~ ? При чем тут «лучше обычный if, чем !!~» .
28 янв 2020 в 8:25
При том, что намного проще читается обычное сравнение с -1 чем куча спец символов идущих друг за другом 🙂 собственно и такой конструкции !!~ в языке нет, это ж просто куча унарных операторов и для большей экспрессии можно и 10 восклицательных знаков поставить 🙂
29 янв 2020 в 7:49
по вашему конструкция if( -1 == elem.getAttribute(«class»).indexOf(«my__class»)) читается лучше чем if(~elem.getAttribute(«class»).indexOf(«my__class»)) ?