Modificar estilos y clases en el DOM con JS

Usar element.classList te permite gestionar el estado visual de los elementos de forma limpia y eficiente, aplicando estilos predefinidos. Por otro lado, element.style es para cambios dinámicos y calculados, como mover un elemento en la pantalla. Dominar estos métodos en JavaScript es clave para construir interfaces que reaccionen a la acción del usuario.

1. ¿Qué significa modificar estilos y clases con JavaScript?

Cuando desarrollamos una página web, normalmente comenzamos creando la estructura HTML, que define el contenido y la organización del sitio.
Por ejemplo, en un archivo index.html colocamos los elementos HTML como encabezados, párrafos, imágenes o botones.

Luego, en otro archivo llamado style.css, definimos los estilos CSS visuales de esa estructura: los colores, tamaños, fuentes, márgenes, fondos, etc.
Para eso, utilizamos selectores CSS, entre ellos las clases (class), que nos permiten aplicar un conjunto de reglas de estilo a elementos específicos del HTML.

Por ejemplo:

Supongamos que en el archivo donde tenemos el HTML (index.html) tenemos una etiqueta HTML donde introducimos un botón con un selector CSS class con el nombre "btn".

<button class="btn">Click aquí</button>Lenguaje del código: HTML, XML (xml)

Ahora, en el archivo donde colocamos los estilos visuales (CSS), o sea, en un archivo como style.css, le damos ciertos estilos visuales al botón del HTML anterior, usando específicamente el selector CSS que le colocamos a dicho botón (class="btn")

.btn {
  background-color: steelblue;
  color: white;
  border: none;
  padding: 10px 20px;
}Lenguaje del código: CSS (css)

Hasta acá todo ocurre de manera estática.
Cuando abrimos el archivo index.html en un navegador como Google Chrome, el navegador interpreta el HTML y el CSS, y construye una representación interna de la página llamada DOM (Document Object Model).
El DOM es básicamente una estructura de objetos en memoria que representa todos los elementos de tu página, permitiendo que el navegador los muestre visualmente y que JavaScript pueda acceder a ellos.

1.1. ¿Y cómo modificamos estos estilos con JavaScript?

Cuando agregamos un archivo script.js y lo vinculamos al HTML, JavaScript puede interactuar con el DOM y modificar sus elementos en tiempo real.
Esto incluye cambiar clases CSS o estilos específicos, lo que altera directamente la apariencia visual del sitio mientras el usuario interactúa con él.🎯

Por ejemplo, con JavaScript podemos:

• Agregar o quitar clases CSS (element.classList.add(), remove(), toggle()).
• Cambiar propiedades de estilo directamente (element.style.propertyName).

Esto significa que no necesitamos volver al archivo CSS para cambiar la apariencia de un elemento:
podemos hacerlo dinámicamente desde el propio JavaScript, según las acciones del usuario o las condiciones del momento.

1.2. ¿Por qué modificar estilos con JavaScript en lugar del archivo CSS?

Modificar estilos directamente en el archivo CSS sirve cuando queremos definir una apariencia fija o predecible.
Pero JavaScript se usa cuando los estilos deben cambiar dinámicamente, por ejemplo:

• Mostrar u ocultar elementos al hacer clic.
• Cambiar el color de fondo según la hora del día.
• Adaptar un diseño según una acción del usuario.
• Crear efectos visuales o transiciones de estado.

En otras palabras:

• El CSS define cómo se ve algo.
• JavaScript decide cuándo y por qué debe verse así.

1.4. Ejemplo: Cambiar el color de un cuadro al hacer clic

HTML:

<button id="btn">Cambiar color</button>
<div id="caja" class="box"></div>Lenguaje del código: HTML, XML (xml)

CSS:

.box {
  width: 100px;
  height: 100px;
  background-color: steelblue;
  transition: background-color 0.3s ease;
}

.activo {
  background-color: tomato;
}
Lenguaje del código: CSS (css)

JavaScript:

const btn = document.getElementById('btn');
const caja = document.getElementById('caja');

btn.addEventListener('click', () => {
  caja.classList.toggle('activo');
});
Lenguaje del código: JavaScript (javascript)

Explicación:

1. En el HTML, tenemos un botón y un cuadro (div).
2. En el CSS, la clase .box define el estilo inicial, y la clase .activo define cómo se verá el cuadro cuando esté “activo”.
3. En el JavaScript, seleccionamos ambos elementos con getElementById() y escuchamos el evento click del botón.
4. Cuando se hace clic, usamos classList.toggle('activo') para alternar la clase:
   • Si el cuadro no la tiene, se agrega y el color cambia a rojo (tomato).
   • Si ya la tiene, se quita y vuelve al color azul (steelblue).

Este ejemplo muestra el beneficio real de modificar estilos con JavaScript:
podemos crear interactividad y dinamismo sin tocar el archivo CSS cada vez que queramos un cambio visual, porque JavaScript actúa directamente sobre el DOM en tiempo real.

2. ¿Cómo modificar estilos y clases con JavaScript? Paso a paso

Para que JavaScript modifique la apariencia de un elemento, se requieren tres pasos fundamentales:

1. Seleccionar
2. Manipular (Clase o Estilo)
3. Ejecutar (Eventos).

2.1. PASO 1: Seleccionar el elemento (Obtener el nodo del DOM)

JavaScript necesita saber qué elemento quieres cambiar. Esto se logra obteniendo una referencia al nodo del DOM.

Para conocer más sobre estas propiedades, puedes seguir el siguiente link sobre como acceder al DOM con JS.

📌Escribe tu HTML/CSS

Asegúrate de que tu elemento HTML tenga un identificador o una clase para poder seleccionarlo fácilmente.

HTML

<button id="btn-toggle" class="boton">Haz Click</button>
<div id="panel-oculto" class="panel">Contenido Secreto</div>Lenguaje del código: HTML, XML (xml)

CSS

/* styles.css */
.panel {
  background-color: #f0f0f0;
  padding: 20px;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height 0.5s ease-out, opacity 0.5s;
}

.panel.visible { /* ESTA ES LA CLASE QUE JS VA A MANIPULAR */
  max-height: 200px;
  opacity: 1;
  border-left: 5px solid #007bff;
}Lenguaje del código: CSS (css)

Explicación:

• Como vemos aquí, en el HTML, tenemos dos etiquetas HTML con sus respectivos selectores CSS.
• Luego, tenemos el archivo CSS, donde le aplicamos estilos «estáticos» a esas etiquetas HTML, a través de sus selectores CSS.
• Y luego cambiaremos esos estilo CSS, pero manipulándolos con JavaScript, de manera dinámica (no estática).

📌Obtener la referencia en JavaScript

Usa el método más apropiado para seleccionar el nodo y guárdalo en una constante (link de las propiedades de acceso al DOM que dejamos al inicio del paso 1).

JavaScript

// script.js
// 🎯 Selecciona el elemento por su ID
const boton = document.getElementById('btn-toggle'); 
const panel = document.querySelector('#panel-oculto'); Lenguaje del código: JavaScript (javascript)

Aquí:

• Este código, tiene como objetivo seleccionar y guardar referencias (en variables JS) a elementos HTML específicos (en este caso los selectores CSS del HTML anterior)
• Para que JavaScript pueda manipularlos posteriormente y cambiar sus estilo de manera dinámica, o sea, luego que el usuario realice alguna acción dentro de la página web.
• Es el primer y esencial paso para interactuar con la página web.

2.2. PASO 2: Ejecutar la manipulación (Manejo de eventos)

La modificación siempre ocurre en respuesta a algo (un evento o una condición lógica). El evento más común es el click.

Básicamente, lo que hacemos en este paso es preparar el escenario en la página web, para que el usuario realice alguna acción, la cual, será la acción que posteriormente ocasionará un cambio en los estilo preestablecidos.

Esto significa que: «Cuando el usuario haga CLIC en este BOTÓN, ejecutará mi código de JavaScript para cambiar estilos/clases.»

📌Adjuntar el escuchador de eventos

Ejemplo; usando addEventListener() para indicar a JavaScript que espere una acción.

JavaScript

// Añade un 'escuchador' al botón para detectar el click
boton.addEventListener('click', function() {
  // Aquí es donde llamamos a la función de modificación del DOM
  // (Paso 3)
}); Lenguaje del código: JavaScript (javascript)

2.3. PASO 3: Manipular clases o estilos

Dentro de la función del evento (el callback), aplicamos la manipulación deseada usando:

• classList
• style.

Opción A: Usar classList para modificación de clases (Recomendada)

Usar classList es la forma profesional de gestionar estados.

📌CASO 1: Alternar un estado (Toggle)

La forma más limpia para un botón de «mostrar/ocultar».

JavaScript

boton.addEventListener('click', function() {
  // 💡 TOGGLE: Si 'visible' está, lo quita. Si no está, lo añade.
  panel.classList.toggle('visible'); 
});Lenguaje del código: JavaScript (javascript)

¿Qué hacemos aquí?:
Cada vez que se hace clic en el botón, el código revisa si el elemento panel tiene la clase "visible".

• Si ya la tiene, la elimina.
• Si no la tiene, la agrega.

👉 Es ideal para mostrar/ocultar menús, paneles o modales de forma dinámica.

📌CASO 2: Añadir o quitar clases múltiples

JavaScript

// Para añadir
panel.classList.add('clase-a', 'clase-b'); 

// Para quitar
panel.classList.remove('clase-a', 'clase-b'); 

// Para verificar antes de actuar
if (panel.classList.contains('visible')) {
  console.log("El panel está abierto.");
}Lenguaje del código: JavaScript (javascript)

¿Qué hacemos aquí?:

1. En la líneas para agrega o elimina varias clases de una sola vez, separadas por comas:
   • 👉 Se usan para cambiar varios estilos o estados de un elemento simultáneamente (por ejemplo: aplicar animaciones, sombras, colores, etc.).
2. Mientras que en el bloque if:
   • Comprueba si el elemento panel tiene la clase "visible".
     👉 Sirve para ejecutar acciones condicionales dependiendo del estado visual del elemento (por ejemplo, cambiar el texto del botón a “Cerrar”).
3. En resumen:
   • Estos métodos (add, remove, toggle, contains) te permiten controlar visualmente el estado de los elementos desde JavaScript de manera limpia, sin modificar el archivo CSS directamente.

Opción B: Usar .style para modificación directa de estilos.

Solo para valores dinámicos. Recuerda usar camel case.

📌 Establecer propiedades

JavaScript

boton.addEventListener('click', function() {
  // 🎨 Cambiar el color de fondo del botón
  boton.style.backgroundColor = 'red'; 
  
  // 📏 Cambiar el tamaño de la fuente (usando camel case)
  boton.style.fontSize = '18px'; 
});Lenguaje del código: JavaScript (javascript)

Explicación:

1. Este código establece un escuchador de eventos en el elemento boton. Cuando el usuario hace clic ('click') en ese botón, se ejecutan dos acciones de estilo directas:
   • boton.style.backgroundColor = 'red';: Accede a la propiedad style del elemento y establece el estilo CSS background-color a 'red'.
   • boton.style.fontSize = '18px';: Establece el estilo CSS font-size a '18px'.
2. Clave profesional: Observa cómo las propiedades CSS con guiones (background-color, font-size) se convierten a la notación camelCase (backgroundColor, fontSize) para ser usadas en JavaScript. Estos cambios se aplican como estilos en línea en el HTML.

📌Remover estilos en línea:

Para quitar un estilo que estableciste directamente, simplemente asígnale una cadena vacía.

JavaScript

boton.addEventListener('dblclick', function() {
  // 🗑️ Quita el color de fondo establecido anteriormente
  boton.style.backgroundColor = ''; 
});Lenguaje del código: JavaScript (javascript)

Explicación:

• Este código establece otro escuchador de eventos, pero esta vez está atento al doble clic ('dblclick') del usuario en el botón.
• Cuando se detecta el doble clic, la acción boton.style.backgroundColor = ''; se ejecuta. Al asignar una cadena vacía ('') a una propiedad de style que fue establecida previamente, JavaScript elimina ese estilo en línea del elemento. El elemento volverá a mostrar el color de fondo definido por las clases CSS o las reglas generales de tu hoja de estilos (styles.css).

2.4. Resumen del flujo de trabajo:

1. HTML/CSS: Define la estructura y todos los estilos posibles, especialmente las clases de «estado» (.visible, .activo, .error).
2. JavaScript – Selección: Usa document.querySelector o getElementById para obtener los nodos.
3. JavaScript – Evento: Usa addEventListener para esperar una acción del usuario.
4. JavaScript – Manipulación:
   • Para la mayoría de los casos de estado (activo/inactivo, visible/oculto), usa element.classList.toggle().
   • Para valores dinámicos o calculados (ej: mover un elemento a una coordenada), usa element.style.propiedadCamelCase = 'valor'.

3. classList

Hasta aquí ya vimos el paso a paso para modificar estilos dinámicamente con JavaScript ahora vamos a profundizar sobre qué es y para qué sirve el método classList

3.1. ¿Qué es classList?

classList es una propiedad del DOM que poseen todos los elementos HTML y que devuelve un objeto especial de tipo DOMTokenList.
Este objeto representa todas las clases CSS que tiene el elemento y te permite añadir, eliminar, alternar o comprobar clases fácilmente mediante métodos específicos.

En otras palabras:

classList es la forma moderna, limpia y segura de gestionar las clases CSS de un elemento directamente desde JavaScript.

3.2. ¿Para qué sirve?

Sirve para modificar dinámicamente los estilos y comportamientos visuales de los elementos en una página, sin tocar el archivo CSS.
Con classList, JavaScript puede responder a eventos del usuario (como clics o desplazamientos) y cambiar la apariencia o el estado de los elementos en tiempo real.

Por ejemplo:

• Mostrar u ocultar un menú.
• Cambiar el color de un botón al pasar el mouse o al hacer clic.
• Activar animaciones CSS.
• Indicar estados como “activo”, “error”, “completado”, etc.

3.3. Principales métodos De classList

Método	Descripción	Ejemplo
.add('clase')	Agrega una o más clases.	element.classList.add('activo')
.remove('clase')	Elimina una o más clases.	element.classList.remove('oculto')
.toggle('clase')	Alterna (agrega si no está, quita si está).	element.classList.toggle('visible')
.contains('clase')	Verifica si un elemento tiene una clase.	element.classList.contains('activo') → true/false
.replace('antigua', 'nueva')	Sustituye una clase por otra.	element.classList.replace('error', 'ok')

3.4. Ejemplo práctico

HTML:

<button id="switch">Modo oscuro</button>
<body id="pagina"></body>Lenguaje del código: HTML, XML (xml)

CSS:

.dark-mode {
  background-color: #222;
  color: #fff;
}Lenguaje del código: CSS (css)

JavaScript:

const btn = document.getElementById('switch');
const body = document.getElementById('pagina');

btn.addEventListener('click', () => {
  body.classList.toggle('dark-mode');
});Lenguaje del código: JavaScript (javascript)

Explicación

1. classList accede a las clases del elemento <body>.
2. Cuando el usuario hace clic, se usa toggle('dark-mode') para alternar entre modo claro y oscuro.
3. Todo esto ocurre sin recargar la página ni modificar el CSS, solo manipulando las clases desde JavaScript.

EN RESUMEN:

• classList es un objeto que maneja las clases CSS de un elemento del DOM.
• Permite agregar, quitar, alternar o verificar clases de manera sencilla.
• Es esencial para crear interactividad y cambios visuales dinámicos.
• Reemplaza la antigua forma de modificar el atributo className, ofreciendo más control y seguridad.

4. .style

4.1. ¿Qué es element.style y para qué sirve?

element.style es una propiedad del DOM que te permite modificar los estilos CSS directamente desde JavaScript, aplicándolos en línea al elemento (es decir, dentro del propio HTML, como si los escribieras con el atributo style="").

En otras palabras:

style sirve para cambiar visualmente un elemento en tiempo real mediante código JavaScript, sin necesidad de editar el archivo CSS ni recargar la página.

4.2. ¿Cómo funciona?

Cada elemento HTML tiene su propio objeto style.
A través de él, podés acceder o modificar cualquier propiedad CSS usando notación de punto (.) o notación de corchetes ([]).

Por ejemplo:

element.style.color = 'red';
element.style.backgroundColor = 'blue';Lenguaje del código: JavaScript (javascript)

Esto sería equivalente a escribir en HTML:

<div style="color: red; background-color: blue;"></div>Lenguaje del código: HTML, XML (xml)

4.3. Reglas importantes al usar .style

1. Los nombres de propiedades CSS se escriben en camelCase.
   • En CSS escribís background-color, pero en JavaScript se convierte en backgroundColor.
     Ejemplo: caja.style.fontSize = '20px';
2. Los valores deben ser cadenas (strings).
   • Siempre se escriben entre comillas, incluyendo las unidades: caja.style.marginTop = '10px';
3. Solo modifica estilos inline.
   • Es decir, los aplica directamente al elemento, sin afectar ni sobrescribir las reglas del archivo CSS (aunque tienen prioridad sobre ellas).

⚠️ Advertencia Importante: Los estilos aplicados con element.style se convierten en estilos en línea (<div style="...">). Estos tienen una alta especificidad y anulan los estilos de las hojas de estilo externas. Úsalo con moderación, solo para estilos verdaderamente dinámicos. Para la mayoría de los cambios, la manipulación de clases es superior.

4.3. Ejemplo práctico

HTML:

<button id="cambiar">Cambiar estilo</button>
<div id="cuadro">Texto de ejemplo</div>Lenguaje del código: HTML, XML (xml)

CSS:

#cuadro {
  width: 150px;
  height: 100px;
  background-color: lightblue;
  text-align: center;
  line-height: 100px;
  transition: all 0.3s ease;
}Lenguaje del código: CSS (css)

JavaScript:

const btn = document.getElementById('cambiar');
const cuadro = document.getElementById('cuadro');

btn.addEventListener('click', () => {
  cuadro.style.backgroundColor = 'tomato';
  cuadro.style.color = 'white';
  cuadro.style.transform = 'scale(1.1)';
});Lenguaje del código: JavaScript (javascript)

Explicación

1. Seleccionamos el botón y el cuadro con getElementById().
2. Al hacer clic, se ejecuta una función que modifica directamente los estilos del elemento #cuadro.
3. Se cambian las propiedades backgroundColor, color y transform, aplicándose al instante en el navegador.
4. El efecto visual es inmediato, sin necesidad de recargar ni modificar el archivo CSS.

4.4. ¿Cuándo conviene usar .style?

✅ Ideal para:

• Aplicar cambios de estilo temporales o dinámicos.
• Crear efectos o animaciones personalizadas.
• Cambiar valores específicos en respuesta a eventos del usuario (clicks, desplazamientos, etc.).

🚫 No se recomienda para:

• Definir la apariencia general del sitio.
• Aplicar muchos estilos a la vez (en esos casos es mejor usar clases con classList).

EN RESUMEN:

• element.style te permite acceder y modificar los estilos CSS directamente desde JavaScript.
• Los estilos aplicados son inline, y tienen prioridad sobre los definidos en CSS externo.
• Se usa para cambios rápidos o dinámicos en respuesta a la interacción del usuario.
• Es complementario a classList: classList gestiona conjuntos de estilos predefinidos,
  mientras que .style modifica propiedades puntuales en el momento.

5. Preguntas frecuentes sobre modificación de estilos y clases en el DOM

5.1. Clases vs. Estilos directos

¿Cuál es la diferencia entre usar element.classList.add() y element.style.propertyName? ¿Cuándo debo usar cada uno?

• classList (clases) es para gestionar estados y apariencia predefinida (la mejor práctica). style (estilos directos) es para valores dinámicos o calculados (ej. posiciones en píxeles variables).

5.2. Notación de estilos

¿Por qué las propiedades CSS con guiones, como background-color, no funcionan en JavaScript y cómo debo escribirlas?

• En JavaScript, debes usar la notación Camel Case porque los guiones (-) se interpretarían como una resta. Por lo tanto, background-color se convierte en backgroundColor.

5.3. Alternar eficiente

¿Cómo puedo hacer que un elemento se muestre y se oculte (toggle) con un solo clic de la manera más limpia?

• Usando el método element.classList.toggle('nombre-clase'). Es el método más limpio y eficiente para cambiar un estado entre dos opciones (ej. abrir/cerrar menú).

5.4. Propiedades obtenidas

¿Cómo puedo obtener el valor de un estilo aplicado a un elemento que no está definido en línea (que viene del CSS externo)?

• Debes usar window.getComputedStyle(element). Esto devuelve un objeto con todos los estilos finales aplicados al elemento (incluyendo herencia, clases y hojas de estilo externas).

5.5. Clases múltiples

¿Cómo añado o elimino varias clases a la vez sin tener que llamar a classList.add() o classList.remove() varias veces?

• Todos los métodos de classList (add, remove, toggle) aceptan múltiples argumentos separados por comas. Ejemplo: element.classList.add('claseA', 'claseB', 'claseC');.

5.6. Evitar sobrescritura (Legado)

¿Por qué NO se recomienda usar element.className para cambiar clases hoy en día?

• Porque element.className sobrescribe toda la lista de clases. Si el elemento ya tenía otras clases necesarias, estas se perderían. classList manipula las clases individualmente sin afectar las demás.

5.7. Forzar Toggle

¿Cómo puedo usar classList.toggle() para forzar que una clase se añada o se quite, sin importar su estado actual?

• Usando el segundo argumento booleano. element.classList.toggle('clase', true) siempre la añade. element.classList.toggle('clase', false) siempre la quita.

5.8. Estilos con !important

¿Cómo se aplica la regla !important a un estilo cuando se usa element.style en JavaScript?

• Usando el método element.style.setProperty(). Ejemplo: element.style.setProperty('color', 'red', 'important');. Esto se usa solo como último recurso.

5.9. Modificar múltiples elementos

¿Cómo puedo añadir una clase a todos los elementos que comparten la misma clase o selector (ej. todos los div.caja)?

• Primero, selecciona todos los elementos con document.querySelectorAll('.caja') (que devuelve un NodeList). Luego, debes iterar sobre esa lista (generalmente con un bucle forEach) y aplicar la modificación a cada elemento individualmente.