Что такое функция hasClass с простым JavaScript? - PullRequest
Новая
       0

Что такое функция hasClass с простым JavaScript?

256 голосов
/ 23 февраля 2011

Как вы работаете в jQuery hasClass с обычным старым JavaScript? Например, 

<body class="foo thatClass bar">

Какой способ JavaScript спрашивать, если <body> имеет thatClass?

Ответы [ 13 ]

752 голосов
/ 02 мая 2013

Просто используйте classList.contains(): 

if (document.body.classList.contains('thatClass')) {
    // do some stuff
}

Другое использование classList: 

document.body.classList.add('thisClass');
// $('body').addClass('thisClass');

document.body.classList.remove('thatClass');
// $('body').removeClass('thatClass');

document.body.classList.toggle('anotherClass');
// $('body').toggleClass('anotherClass');

Поддержка браузера:

  • Chrome 8.0
  • Firefox 3.6
  • IE 10
  • Опера 11.50
  • Safari 5.1

classList Поддержка браузера

112 голосов
/ 23 февраля 2011

Вы можете проверить, соответствует ли element.className /\bthatClass\b/.
\b соответствует разрыву слова.

Или вы можете использовать собственную реализацию jQuery: 

var className = " " + selector + " ";
if ( (" " + element.className + " ").replace(/[\n\t]/g, " ").indexOf(" thatClass ") > -1 )

Чтобы ответить на ваш более общий вопрос, вы можете взглянуть на исходный код jQuery на github или на источник для hasClass, в частности, в этом средстве просмотра исходного кода .

34 голосов
/ 05 марта 2013

Самый эффективный лайнер, который

  • возвращает логическое значение (в отличие от ответа Орблинга)
  • Не возвращает ложное срабатывание при поиске thisClass для элемента, которыйимеет class="thisClass-suffix".
  • совместим с любым браузером до IE6 
function hasClass( target, className ) {
    return new RegExp('(\\s|^)' + className + '(\\s|$)').test(target.className);
}
28 голосов
/ 25 февраля 2015 

// 1. Use if for see that classes:

if (document.querySelector(".section-name").classList.contains("section-filter")) {
  alert("Grid section");
  // code...
}
<!--2. Add a class in the .html:-->

<div class="section-name section-filter">...</div>
25 голосов
/ 23 февраля 2011

Атрибут, который хранит используемые классы: className.

Итак, вы можете сказать: 

if (document.body.className.match(/\bmyclass\b/)) {
    ....
}

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

http://code.jquery.com/jquery-1.5.js

10 голосов
/ 07 ноября 2016

Функция hasClass: 

HTMLElement.prototype.hasClass = function(cls) {
    var i;
    var classes = this.className.split(" ");
    for(i = 0; i < classes.length; i++) {
        if(classes[i] == cls) {
            return true;
        }
    }
    return false;
};

функция addClass: 

HTMLElement.prototype.addClass = function(add) {
    if (!this.hasClass(add)){
        this.className = (this.className + " " + add).trim();
    }
};

функция removeClass: 

HTMLElement.prototype.removeClass = function(remove) {
    var newClassName = "";
    var i;
    var classes = this.className.replace(/\s{2,}/g, ' ').split(" ");
    for(i = 0; i < classes.length; i++) {
        if(classes[i] !== remove) {
            newClassName += classes[i] + " ";
        }
    }
    this.className = newClassName.trim();
};
10 голосов
/ 20 апреля 2015

Я использую простое / минимальное решение, одну строку, кросс-браузер, а также работаю с устаревшими браузерами: 

/\bmyClass/.test(document.body.className) // notice the \b command for whole word 'myClass'

Этот метод хорош, потому что не требует полифилов , и если вы используете их для classList, он намного лучше с точки зрения производительности. По крайней мере, для меня.

Обновление: я сделал крошечный полифилл, это универсальное решение, которым я сейчас пользуюсь: 

function hasClass(element,testClass){
  if ('classList' in element) { return element.classList.contains(testClass);
} else { return new Regexp(testClass).exec(element.className); } // this is better

//} else { return el.className.indexOf(testClass) != -1; } // this is faster but requires indexOf() polyfill
  return false;
}

Другие манипуляции с классами см. В полном файле здесь .

8 голосов
/ 06 марта 2015

Хорошим решением для этого является работа с classList и содержит.

Я сделал это так: 

... for ( var i = 0; i < container.length; i++ ) {
        if ( container[i].classList.contains('half_width') ) { ...

Итак, вам нужен ваш элемент и проверьте список классов.Если один из классов совпадает с тем, который вы ищете, он вернет true, если нет - false!

5 голосов
/ 08 августа 2015

Используйте что-то вроде: 

Array.prototype.indexOf.call(myHTMLSelector.classList, 'the-class');
3 голосов
/ 14 июня 2018 
if (document.body.className.split(/\s+/).indexOf("thatClass") !== -1) {
    // has "thatClass"
}
Страница:
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...