web-dev-qa-db-fra.com

Qu'est-ce que la fonction "hasClass" avec JavaScript?

Comment faites-vous jQuery’s hasClass avec JavaScript? Par exemple,

<body class="foo thatClass bar">

Quelle est la méthode JavaScript pour demander si <body> a thatClass?

javascriptdom
262
Kyle

Vous pouvez vérifier si element.className correspond à /\bthatClass\b/.
\b correspond à un saut de mot.

Ou, vous pouvez utiliser la propre implémentation de jQuery:

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

Pour répondre à votre question plus générale, vous pouvez consulter le code source de jQuery sur github ou la source de hasClass spécifiquement dans ce visualiseur source .

114
SLaks

Utilisez simplement classList.contains(): 

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

Autres utilisations de 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');

Prise en charge du navigateur:

  • Chrome 8.0
  • Firefox 3.6
  • IE 10
  • Opera 11.50
  • Safari 5.1

classList Prise en charge du navigateur

771
Damien

Le one-liner le plus efficace

  • retourne un booléen (par opposition à la réponse d'Orbling)
  • Ne renvoie pas de faux positif lors de la recherche de thisClass sur un élément comportant class="thisClass-suffix".
  • est compatible avec tous les navigateurs jusqu'à au moins IE6
function hasClass( target, className ) {
    return new RegExp('(\\s|^)' + className + '(\\s|$)').test(target.className);
}
34
raveren
// 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>
28
U3RpdmUgQVou

L'attribut qui stocke les classes utilisées est className.

Alors vous pouvez dire:

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

Si vous voulez un endroit qui vous montre comment jQuery fait tout, je vous suggère:

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

25
Orbling

J'utilise une solution simple/minimale, une ligne, plusieurs navigateurs et fonctionne également avec les anciens navigateurs:

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

Cette méthode est excellente car elle ne nécessite pas polyfills et si vous les utilisez pour classList c'est beaucoup mieux en termes de performances. Au moins pour moi.

Mise à jour: j'ai fabriqué un petit polyfill qui est une solution complète que j'utilise maintenant:

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;
}

Pour l’autre manipulation de classe, voir le fichier complet ici .

10
thednp

fonction 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;
};

fonction addClass:

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

fonction 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
Gawin

une bonne solution consiste à travailler avec classList et contient.

je l'ai fait comme ça:

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

Vous avez donc besoin de votre élément et consultez la liste des classes. Si l'une des classes est identique à celle que vous recherchez, elle retournera true, sinon elle retournera false!

8
Bastian Fießinger

Utilisez quelque chose comme:

Array.prototype.indexOf.call(myHTMLSelector.classList, 'the-class');
5
Alejandro Nanez
if (document.body.className.split(/\s+/).indexOf("thatClass") !== -1) {
    // has "thatClass"
}
3
Alexandr Karbivnichiy

Cette fonction 'hasClass' fonctionne dans IE8 +, FireFox et 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);
}
1
manufosela

Eh bien, toutes les réponses ci-dessus sont assez bonnes, mais voici une petite fonction simple que j'ai préparée. Ça marche plutôt bien.

function hasClass(el, cn){
    var classes = el.classList;
    for(var j = 0; j < classes.length; j++){
        if(classes[j] == cn){
            return true;
        }
    }
}
1
j0hnstew

Que pensez-vous de cette approche?

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

0
Marian07