Controlla se esiste una classe CSS senza jQuery

Question

Utilizzando vanilla javascript o prototipo qualcuno può mostrarmi come posso eseguire un controllo per verificare se esiste una classe? Per esempio io sono l'aggiunta di una classe chiamata HideIt con questo codice:

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

Ho anche bisogno di uno script che in seguito può controllare per vedere se HideIt esiste. Ho provato cose come:

if (overlay.className == "hideIt") 

Ma non va bene. Qualche idea?

Answer 1

Utilizzare uno regexp. \b corrisponderà ai limiti delle parole (uno spazio, un carattere di nuova riga, un carattere di punteggiatura o una fine di una stringa).

var overlay = document.getElementById("overlay_modal"); 
if (overlay.className.match(/\bhideIt\b/)) 
{ 
    // frob a widget 
} 

Answer 2

si potrebbe usare getElementsByClassName(), anche se questo non è supportata in tutti i browser (non in IE < 9):

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

else { 
    // class exists in the document 
} 

Si potrebbe, a seconda delle esigenze di compatibilità del browser, utilizzare querySelectorAll():

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

Riferimenti:

• Compatibility for querySelectorAll at Quirksmode.
• querySelectorAll() at Mozilla Developer Network.
• getElementsByClassName() at Mozilla Developer Network.
• Compatibility for getElementsByClassName(), at Quirksmode.

Answer 3

var id = document.getElementById("id"); 
var classes = id.className.split(" "); 
if(classes.indexOf("class_name") == -1) 
{ 
} 

Answer 4

Poiché la domanda lo richiede anche qui è the Prototype way,

if (overlay.hasClassName('hideIt'))