¿Cómo añadir y quitar clases CSS a los elementos HTML?

Para los expertos en desarrollo web, añadir, modificar o eliminar clases css a elementos HTML es una obviedad, los que ya sepan cómo hacerlo pueden enviarnos comentarios para enriquecer este post.

Si quieres añadir y quitar clases CSS a los elementos HTML, lo puedes hacer con jQuery de una forma muy sencilla, por ejemplo tenemos una clase my-new-class que es la que queremos agregar y quitar a un <div>.

También podemos usar código estándar de JavaScript para agregar / quitar clases HTML.

Ejemplo con jQuery

// ## agregar clase
$('div').addClass('my-new-class'); 


// ## eliminar clase
$('div').removeClass('my-new-class');

Ejemplo JavaScript

// agregar clase
document.getElementById('elem').className = 'my-new-class';


// eliminar clase
document.getElementById('elem').className = document.getElementByTag('div').className.replace( /(?:^|\s)my-new-class(?!\S)/g , '' )

El código estándar de JavaScript es más largo que usar jQuery como se puede ver en los ejemplos de arriba. Pero si no quiere depender de un marco, siempre se puede utilizar una nueva API de JavaScript llamada classList.

Uso API classList

Similar a jQuery, classList proporciona un conjunto de métodos que nos permiten modificar clases HTML.

En un caso en el que hay un div con múltiples clases, podemos recuperar las clases que se asignan en el div usando classList.

var classes = document.getElementByID('elem').classList;

Cuando abrimos el navegador y vemos en herramientas de desarrollo la consola, podemos ver la lista de las clases

Para agregar y quitar clase, podemos utilizar .add() y .remove() .

var elem = document.getElementByID('elem');

// agregar clase
elem.classList.add('my-new-class'); 

//eliminar clase
elem.classList.remove('my-new-class');

Podemos agregar múltiples clases, esto se puede hacer mediante la separación de cada clase con una coma:

elem.classList.add('my-new-class', 'my-other-class');  

Para comprobar si ciertos elementos contienen la clase especificada, podemos utilizar .contains() . Devolverá true si la clase especificada está presente, y devolver false si no lo hace.

elem.classList.contains('class-name'); 

También podemos modificar la clase utilizando .toggle() . El siguiente fragmento de código muestra cómo ligamos el método .toggle() con un evento de clic del ratón.

var button = document.getElementById('button');  
function toggle() {  
    elem.classList.toggle('bg');  
}  
button.addEventListener('click', toggle, false); 

Por ultimo comentarte que classList es una nueva API nativa de JavaScript que también se introdujo junto con HTML5. Es limpia y simple, y trabaja en los siguientes navegadores: Firefox 3.6, Opera 11.5 y Chrome 8 y Safari 5.1. Sin embargo Internet Explorer 9 no tiene soporte para esta API, pero como siempre hay una solución, podemos utilizar el polyfills para implementar la API classList en Internet Explorer.