Agregar y eliminar clases HTML a pedido con jQuery

 // ## add clase $ ('div'). addClass ('my-new-class'); // ## remove class $ ('div'). removeClass ('my-new-class'); 

También podemos usar código JavaScript estándar para agregar / eliminar clases HTML de esta manera:

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

El código como puede ver arriba es menos directo que cuando lo estamos haciendo con jQuery de JavaScript Framework. Pero si no quiere confiar en un marco, siempre puede usar una nueva API de JavaScript llamada classList .

Usando classList API

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

En un caso donde hay un div con múltiples clases, podemos recuperar las clases que están asignadas en el div usando classList .

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

Cuando abrimos la Consola del navegador, podemos ver la lista de las clases.

Para agregar y eliminar clases, podemos usar .add() y .remove() .

 var elem = document.getElementByID ('elem'); // agrega la clase elem.classList.add ('my-new-class'); // eliminar la clase elem.classList.remove ('my-new-class'); 

Agregar varias clases también se puede hacer separando cada clase con una coma :

 elem.classList.add ('mi-nueva-clase', 'mi-otra-clase'); 

Para verificar si ciertos elementos contienen la clase especificada, podemos usar .contains() . Devolverá verdadero si la clase especificada está presente, y devolverá falso si no lo está.

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

También podemos alternar la clase usando .toggle() . El siguiente fragmento de código muestra cómo .toggle() método .toggle() con un evento de clic del mouse.

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

Mira la demostración en acción desde los siguientes enlaces.

• Ver demostración
• Descargar Fuente

Pensamiento final

classList es una nueva API nativa de JavaScript que también se presenta junto con HTML5. Es limpio y simple, y funciona en los siguientes navegadores: Firefox 3.6, Opera 11.5, Chrome 8 y Safari 5.1. Sin embargo, está ausente en Internet Explorer 9 y versiones posteriores, por lo que es posible que tenga que usar Polyfills cuando implemente la API classList en Internet Explorer.

Recurso adicional

• La API classList - HTML5 Doctor
• Elemento classList - MDN
• Notas sobre la API classList

20 Más consejos, trucos y herramientas de Tumblr

Tumblr, el lugar mágico donde residen todos los fandoms. Todavía es tan popular como siempre para aquellos que comparten y buscan sus cosas favoritas. Sin embargo, al igual que todos los sitios de redes sociales, sufre cambios. El sitio visual de microblogging recientemente actualizó su interfaz y API para una mejor experiencia de blogging, a partir de enero de 2014.Si

(Consejos de tecnología y diseño)

Conceptos básicos detrás de la teoría del color para el diseñador web

Como artista digital colectivo, es importante comprender la ciencia fundamental detrás de la teoría del color. Es un tema popular con una gran cantidad de información para retener y digerir. Este tema no solo se enfoca en las artes y el diseño, sino que también involucra un conjunto de ciencia de la óptica.Hay m

(Consejos de tecnología y diseño)