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

Microsoft revela lo que Windows 10 está recolectando de usted

Microsoft recopila datos de usuarios de Windows 10 . Eso en sí mismo no debería ser demasiado sorprendente ya que muchas otras compañías tecnológicas recopilan datos de personas que usan sus servicios.Dado que la próxima actualización de creadores traerá consigo un nuevo sistema de configuración de privacidad para Windows 10, Microsoft ha decidido aclarar los detalles sobre el tipo de datos que la empresa está recopilando en su último sistema operativo.Antes de l

(Consejos de tecnología y diseño)

Vea y comparta sus maquetas de bocetos en línea con Sketch Viewer

Si hace un trabajo de diseño, entonces sabe lo difícil que es mantener el control de la versión . Los nombres de archivos basados ​​en fechas pueden funcionar, pero a veces querrá un flujo de trabajo un poco más poderoso.Eso es lo que obtienes con Sketch Viewer, una aplicación web en línea creada para compartir vistas previas de archivos de Sketch y organizar versiones de archivos de Sketch. El sitio

(Consejos de tecnología y diseño)