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

Question

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

как вы делаете jQuery hasClass с равнины ol’ в JavaScript? Например,

<body class="foo thatClass bar">

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

602 13

javascript dom

13 ответов:

Comments

Ничего не найдено.

SLaks · Accepted Answer · 2011-02-23 03:49:39

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

или вы можете использовать собственную реализацию jQuery:
var className = " " + selector + " ";
if ( (" " + element.className + " ").replace(/[\n\t]/g, " ").indexOf(" thatClass ") > -1 ) 
чтобы ответить на ваш более общий вопрос, вы можете посмотреть на jQuery исходный код на github или в источнике для hasClass конкретно в этом источнике просмотра.

Damien · Accepted Answer · 2013-05-02 15:08:01

просто использовать classList:
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 Поддержка Браузеров

raveren · Accepted Answer · 2016-06-28 13:26:54

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

возвращает логическое значение (в отличие от ответа Orbling)

не возвращает ложное срабатывание при поиске thisClass на элементе, который имеет class="thisClass-suffix".

совместим с каждым браузером вплоть до IE6
function hasClass( target, className ) {
    return new RegExp('(\s|^)' + className + '(\s|$)').test(target.className);
}

Orbling · Accepted Answer · 2011-02-23 02:11:02

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

Так что вы можете сказать:
if (document.body.className.match(/\bmyclass\b/)) {
    ....
}
Если вы хотите место, которое показывает вам, как jQuery делает все, я бы предложил:

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

U1RJVkUgQVou · Accepted Answer · 2015-02-25 01:45:26

// 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>

thednp · Accepted Answer · 2016-05-13 19:37:39

Я использую простое / минимальное решение, одну строку, кросс-браузер, а также работает с устаревшими браузерами:
/\bmyClass/.test(document.body.className) // notice the \b command for whole word 'myClass'
этот метод является большим, потому что не требует полифиллы и если вы используете их для classList это гораздо лучше с точки зрения производительности. По крайней мере для меня.

Update: я сделал крошечный полифилл, который является универсальным решением, которое я использую сейчас:
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;
}
для других манипуляций с классом см. полный файл здесь.

Gawin · Accepted Answer · 2016-11-07 15:14:08

функция 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();
};

Bastian Fießinger · Accepted Answer · 2015-03-06 10:32:37

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

Я делал так:
... for ( var i = 0; i < container.length; i++ ) {
        if ( container[i].classList.contains('half_width') ) { ...
Итак, вам нужен ваш элемент и проверьте список классов. Если один из классов совпадает с тем, который вы ищете, он вернет true, если нет, он вернет false!

Alejandro Nanez · Accepted Answer · 2016-11-19 07:49:58

использовать что-то вроде:
Array.prototype.indexOf.call(myHTMLSelector.classList, 'the-class');

Alex Karbivnichiy · Accepted Answer · 2018-06-14 05:01:41

if (document.body.className.split(/\s+/).indexOf("thatClass") !== -1) {
    // has "thatClass"
}

j0hnstew · Accepted Answer · 2014-09-03 06:00:15

Ну все вышеперечисленные ответы довольно хороши, но вот небольшая простая функция, которую я взбил. Это работает довольно хорошо.
function hasClass(el, cn){
    var classes = el.classList;
    for(var j = 0; j < classes.length; j++){
        if(classes[j] == cn){
            return true;
        }
    }
}

manufosela · Accepted Answer · 2017-03-07 22:38:40

эта функция "hasClass" работает в IE8+, FireFox и Chrome:

hasClass = function(el, cls) {
    var regexp = new RegExp('(\s|^)' + cls + '(\s|$)'),
        target = (typeof el.className === 'undefined') ? window.event.srcElement : el;
    return target.className.match(regexp);
}

Marian07 · Accepted Answer · 2015-10-04 11:27:57

что вы думаете о таком подходе?
<body class="thatClass anotherClass"> </body>

var bodyClasses = document.querySelector('body').className;
var myClass = new RegExp("thatClass");
var trueOrFalse = myClass.test( bodyClasses );
https://jsfiddle.net/5sv30bhe/