8

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

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

вот код:

var cells = document.getElementsByTagName('td');

for(var i=0; i<cells.length;i++){
    cells[i].addEventListener('click', selectDate);    
}
function selectDate(){
    this.className += ' active';
}

ссылка на полный код jsfiddle

4 ответа 4

16

Вам поможет метод classList.contains вместо className

contains ( String )
Проверяет, есть ли данный класс у элемента (вернет true или false)

использовать можно так:

if(this.classList.contains('active'))

где this должен быть html-элементом.

17
  • Отличная штука. Не знал. Спасибо 4 дек 2015 в 11:59
  • @tutankhamun, они постепенно расширяют интерфейсы дом элементов :-)
    – Grundy
    4 дек 2015 в 12:00
  • Так скоро jQuery не понадобится в 95% случаев, в который он сейчас почти необходим :) 4 дек 2015 в 12:05
  • @tutankhamun, а в каких например он сейчас почти необходим?
    – Grundy
    4 дек 2015 в 12:06
  • Я вот уже и не уверен, что знаю ответ на ваш вопрос :) Внедрение document.querySelector() и document.querySelectorAll() очень сильно подорвало фундамент jQuery. Получается что в сухом остатке только поддержка старых браузеров 4 дек 2015 в 12:12
2

Можно воспользоваться следующей функцией:

function hasClass(element, className) {
    var rx = new RegExp('(?:^| )' + className + '(?: |$)');
    return rx.test(element.className);
}

Плюс такого решения - работает даже на древних браузерах

2
  • пока сложновато для меня... это чистый js?
    – siberian
    4 дек 2015 в 12:01
  • @MarinaVoronova, чище некуда :-)
    – Grundy
    4 дек 2015 в 12:01
2

сделала так - по клику добавляется класс и удаляется при повторном клике. вот код:

var cells = document.getElementsByTagName('td');
for(var i=0; i<cells.length;i++){
    cells[i].addEventListener('click', selectDate);
}

function selectDate(){
    if(this.classList.contains('active')){
        this.classList.remove('active');
    }else {
        this.classList.add('active');
    }
}

ссылка на полный код: jsfiddle

6
  • Вместо того, чтобы городить такой if, раз уж Вы используете classList, можно воспользоваться готовой функцией: classList.toggle('active'). И совет, ставить обработчики в цикле не хорошо, лучше повесить его на родителя, так шустрее будет работать.
    – Rolandius
    11 дек 2015 в 7:37
  • спасибо, сработало)
    – siberian
    11 дек 2015 в 8:58
  • 1
    Вместо того, что у Вас в selectDate(){} надо написать проcто this.classList.toggle('active')
    – Rolandius
    11 дек 2015 в 8:58
  • да, я уже применила jsfiddle.net/lilubanana/fwxuf5ea/29
    – siberian
    11 дек 2015 в 8:59
  • и еще, для понимания, могу я использовать функцию toggle если не подключена jquery? у меня все работает, но если браузер будет старый?
    – siberian
    11 дек 2015 в 10:09
0

Если нужно проверить именно наличия класса то используйте такую конструкцию

!!~elem.getAttribute("class").indexOf("my__class")

Метод:

classList.toggle('active')

добавляет класс при его отсутствие и удаляет при его наличии.

Метод:

parent.contains(child)

Возвращает true, если parent содержит child или parent == child То есть если у нас несколько child то придется проверять в цикле. Да и опять же вложенность

10
  • !!~elem.getAttribute("class").indexOf("my__class") - плохой вариант, например зацепит my__class1, ну и читаемость ужасная лучше обычный if, чем !!~
    – Grundy
    27 янв 2020 в 16:04
  • 1. js насколько я знаю все задачи делаются для определенной цели. Если конечно у человека будут в одном элементе содержать классы active + no-active + active-elem. То да. Нужно делать через регулярки. 2. Вы вообще знаете для чего конструкция предназначена !!~ ? При чем тут "лучше обычный if, чем !!~" ??? 28 янв 2020 в 8:25
  • При том, что намного проще читается обычное сравнение с -1 чем куча спец символов идущих друг за другом :-) собственно и такой конструкции !!~ в языке нет, это ж просто куча унарных операторов и для большей экспрессии можно и 10 восклицательных знаков поставить :)
    – Grundy
    29 янв 2020 в 7:49
  • по вашему конструкция if( -1 == elem.getAttribute("class").indexOf("my__class")) читается лучше чем if(~elem.getAttribute("class").indexOf("my__class")) ? 30 янв 2020 в 8:15
  • Не, такая тоже плохо читается :-) в нормальном порядке надо писать :-)
    – Grundy
    30 янв 2020 в 22:25

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.