Controleer of een CSS-klasse bestaat zonder jQuery

Met behulp van vanilla JavaScript of prototype kan iemand me laten zien hoe ik een controle kan uitvoeren om te zien of een klasse bestaat? Ik voeg bijvoorbeeld een klasse genaamd hideIt toe met deze code:

var overlay = document.getElementById("overlay_modal");
overlay.className += " hideIt";

Ik heb ook een script nodig dat later kan controleren of hideIt bestaat. Ik heb dingen geprobeerd zoals:

if (overlay.className == "hideIt")

Maar dat is niet goed. Om het even welke ideeën?

6
Waarom ging dit stemmen omlaag?
toegevoegd de auteur Zac, de bron

4 antwoord

Gebruik een regexp . \ b komt overeen met woordgrenzen (een spatie, een nieuwlijnteken, interpunctieteken of einde van tekenreeks).

var overlay = document.getElementById("overlay_modal");
if (overlay.className.match(/\bhideIt\b/)) 
{
   //frob a widget
}
6
toegevoegd
Bedankt, dit werkt echt geweldig!
toegevoegd de auteur Zac, de bron
Beste, schoonste en meest ondersteunde antwoord! :)
toegevoegd de auteur MRVDOG, de bron

You could use getElementsByClassName(), albeit this isn't supported in all browsers (not in IE < 9):

if (!document.getElementsByClassName('classname').length){
   //class name does not exist in the document
}

else {
   //class exists in the document
}

U kunt, afhankelijk van de compatibiliteitsvereisten voor de browser, querySelectorAll() gebruiken:

if (document.querySelectorAll('#overlay_modal.hideIt')) {
   //the element with id of overlay_modal exists and has the class-name 'hideIt'
}

Referenties:

4
toegevoegd
Ik ben het daar meestal mee eens, maar omdat je die hoek al had bekeken, leek het mij niet juist om dat aspect in mijn eigen antwoord op te nemen. Ik zei niet dat dit de beste manieren zijn, maar in plaats daarvan alternatieven presenteren voor de reeds geposte manieren.
toegevoegd de auteur David Thomas, de bron
Ik denk nog steeds dat het gebruik van een regexp op de className van het element de beste aanpak is in dit geval, omdat ze hebben al een verwijzing naar het element zelf. Werkt in alle browsers, geen functieherkenning of vulplaatjes nodig.
toegevoegd de auteur Matt Ball, de bron

Omdat de vraag hier ook om vraagt ​​is de prototype manier ,

if (overlay.hasClassName('hideIt'))
3
toegevoegd
bedankt! dat is goed om te weten
toegevoegd de auteur Zac, de bron
var id = document.getElementById("id");
var classes = id.className.split(" ");
if(classes.indexOf("class_name") == -1)
{
}
3
toegevoegd
Ik denk dat je bedoelt ! == -1 .
toegevoegd de auteur Matt Ball, de bron