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

Crea widgets totalmente animados con Shift.css

La animación web ofrece una manera de captar la atención de las personas y atraerlas hacia un sitio web. Hay muchas herramientas para crear animaciones gratuitas, pero Shift.css es una de las más nuevas del grupo.Es un marco de código abierto gratuito creado para crear animaciones dinámicas dentro de cualquier contenedor . Y e

(Consejos de tecnología y diseño)

20 instaladores de Instagram inspiradores que debes seguir

Con 150 millones de usuarios mensuales activos (desde septiembre de 2013) en todo el mundo, Instagram es claramente una de las aplicaciones más populares del mundo . Es utilizado por muchos grandes fotógrafos y también es una gran fuente de inspiración para los diseñadores web.Hay muchas personas creativas que adoran compartir su creatividad en arte y diseño a través de sus cuentas de Instagram. Y par

(Consejos de tecnología y diseño)