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

var cName = elem.className; elem.className = cName;

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

 class="my-class">

const element = document.querySelector('.my-class'); const className = element.className; console.log(className); // выведет "my-class" 

 class="my-class">

const element = document.querySelector('.my-class'); const classList = element.classList; console.log(classList); // выведет объект DOMTokenList console.log(classList[0]); // выведет первый класс элемента, т.е. "my-class" 

 class="foo bar">

const element = document.querySelector('div'); const classList = element.classList; console.log(classList); // выведет DOMTokenList ["foo", "bar"] 

 class="foo bar">

const element = document.querySelector('div'); const firstClass = element.classList[0]; console.log(firstClass); // выведет "foo" 

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

Как проверить наличие или отсутствие класса у элемента на чистом javascript? Необходимо добавить класс элементу по клику, но при этом проверить наличие у него этого класса перед добавлением, чтобы класс не дублировался. вот код:

var cells = document.getElementsByTagName('td'); for(var i=0; i function selectDate()

ссылка на полный код jsfiddle
Отслеживать
2,139 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
80.9k 9 9 золотых знаков 78 78 серебряных знаков 134 134 бронзовых знака
Отличная штука. Не знал. Спасибо
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.3k 5 5 золотых знаков 25 25 серебряных знаков 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,139 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»)) ?