La manipulación de estilos y clases en el DOM es esencial para cambiar la apariencia de los elementos de una página web en respuesta a las interacciones del usuario o cambios en los datos. Con JavaScript, es posible añadir, quitar o modificar estilos en línea y clases de los elementos de manera dinámica.

Manipulación de Estilos en Línea

Cada elemento DOM tiene una propiedad style que nos permite establecer estilos CSS directamente en el elemento.

Establecer Estilos

Podemos establecer estilos utilizando la propiedad style, y acceder a las propiedades CSS correspondientes.

javascript

Obtener Estilos Computados

Para obtener los estilos computados de un elemento (aquellos que se aplican realmente después de procesar todas las reglas CSS, incluyendo las herencias y las reglas del navegador), utilizamos getComputedStyle.

javascript

Manipulación de Clases

El manejo de clases se realiza a través de la propiedad classList. Esta propiedad ofrece métodos convenientes para añadir, quitar, alternar y verificar clases en un elemento.

add

Añade una o más clases al elemento.

javascript

remove

Remueve una o más clases del elemento.

javascript

toggle

Alterna una clase en el elemento. Si la clase está presente, la remueve; si no, la añade.

javascript

contains

Verifica si el elemento tiene una clase específica.

javascript

replace

Reemplaza una clase por otra.

javascript

Ejemplo de Manipulación de Clases y Estilos

A continuación, un ejemplo que combina la manipulación de estilos en línea y clases usando JavaScript:

html

Ejemplo Dinámico con Eventos

La manipulación de estilos y clases es especialmente útil junto con eventos del DOM. Veamos un ejemplo donde se cambia la apariencia de un botón al hacer clic en él:

html

Conclusión

La manipulación de estilos y clases en el DOM nos permite crear interfaces de usuario dinámicas y receptivas. Al combinar estas técnicas con el manejo de eventos, podemos crear experiencias interactivas ricas y fluidas para los usuarios. En el próximo capítulo, exploraremos cómo navegar a través de los distintos nodos del DOM.