Comprueba si existe una clase de CSS sin jQuery

Question

Al utilizar javascript o prototipo de vanilla, ¿alguien me puede mostrar cómo puedo ejecutar un cheque para ver si existe una clase? Por ejemplo, yo estoy añadiendo una clase llamada HideIt con este código:

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

también necesito un script que más tarde puede comprobar para ver si existe HideIt. He intentado cosas como:

if (overlay.className == "hideIt") 

Pero eso no es bueno. ¿Algunas ideas?

Answer 1

Utilice un regexp. \b coincidirá con los límites de las palabras (un espacio, un carácter de nueva línea, un carácter de puntuación o el final de la cadena).

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

Answer 2

usted podría utilizar getElementsByClassName(), aunque esto no es compatible con todos los navegadores (no en IE < 9):

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

else { 
    // class exists in the document 
} 

Usted puede, dependiendo de los requisitos de compatibilidad del navegador, utilice querySelectorAll():

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

Referencias:

• 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

Debido a que la pregunta se refiere aquí también es the Prototype way,

if (overlay.hasClassName('hideIt'))