Trabajar con Estilos en el DOM

Al trabajar con el Document Object Model (DOM) en JavaScript, cambiar el aspecto de un elemento en tiempo de ejecución es una de las tareas más comunes. Esta guía cubre las formas prácticas de aplicar estilos a elementos del DOM: escribir estilos en línea, leer y establecer propiedades CSS individuales a través de la propiedad style, reemplazar varias propiedades a la vez con cssText, leer los estilos resueltos con getComputedStyle(), y — el enfoque recomendado para la mayoría de los casos — alternar clases CSS con la API classList.

La versión corta: prefiere las clases sobre los estilos en línea. La manipulación directa de estilos está bien para valores que calculas en tiempo de ejecución (una posición, un color elegido dinámicamente), pero para cualquier cosa que represente un estado — "activo", "completado", "error" — define una clase en CSS y actívala o desactívala desde JavaScript. Esta guía muestra ambas opciones y explica cuándo cada una es la herramienta adecuada. Para una visión más amplia del estilo de elementos, consulta Styles and Classes.

Estilos en Línea

Los estilos en línea aplican CSS directamente a un elemento HTML a través de su atributo style. Son útiles para cambios rápidos y puntuales, pero no escalan bien: mezclan la presentación con el marcado, no se pueden reutilizar y ganan en todas las batallas de especificidad salvo !important, lo que los hace difíciles de sobrescribir más adelante.

Ejemplo

<div id="inlineStyleExample">This text will be styled using inline styles.</div>
<button onclick="applyInlineStyle()">Apply Inline Style</button>

<script>
  function applyInlineStyle() {
    const element = document.getElementById('inlineStyleExample');
    element.style.color = 'red';
    element.style.fontSize = '20px';
  }
</script>

En este ejemplo, al hacer clic en el botón se aplicarán estilos en línea al elemento div, cambiando el color del texto a rojo y el tamaño de fuente a 20 píxeles.

Establecer Estilos con la Propiedad style

La propiedad style te proporciona un objeto CSSStyleDeclaration que corresponde al estilo en línea del elemento. Leerla y escribirla es el equivalente en JavaScript de editar el atributo style — por lo que comparte las mismas ventajas e inconvenientes que los estilos en línea, pero te permite calcular valores de forma dinámica.

Hay dos reglas que suelen confundir a la gente:

• Los nombres de propiedades CSS se escriben en camelCase. Las propiedades con guion como font-size y background-color se convierten en style.fontSize y style.backgroundColor. La excepción es float, que se escribe style.cssFloat porque float es una palabra reservada.
• Los valores son strings, con unidades. element.style.width = 200 no hace nada; debes escribir element.style.width = '200px'. Del mismo modo, leer element.style.color tras establecerlo devuelve un string como 'rgb(0, 0, 255)'.

Ejemplo

<div id="stylePropertyExample">This text will be styled using JavaScript.</div>
<button onclick="applyStyleProperty()">Apply Style Property</button>

<script>
  function applyStyleProperty() {
    const element = document.getElementById('stylePropertyExample');
    element.style.color = 'blue';
    element.style.fontSize = '18px';
    element.style.margin = '10px';
  }
</script>

En este ejemplo, al hacer clic en el botón se aplicarán varios estilos al elemento div usando la propiedad style. El color del texto se establece en azul, el tamaño de fuente en 18 píxeles y se añade un margen de 10 píxeles.

Establecer varias propiedades a la vez con cssText

Asignar una propiedad a la vez desencadena una escritura separada en cada ocasión. Cuando necesitas establecer varias propiedades juntas, style.cssText te permite asignarlas en una sola instrucción usando la sintaxis CSS habitual:

element.style.cssText = 'color: white; background-color: navy; padding: 8px;';

Ten en cuenta que asignar cssText reemplaza todos los estilos en línea existentes, por lo que debes usarlo para establecer un bloque completo en lugar de modificar un solo valor. Para eliminar una propiedad concreta, asígnale un string vacío (element.style.color = '') o llama a element.style.removeProperty('color').

Leer el estilo real con getComputedStyle()

La propiedad style solo refleja los estilos en línea. Si un color proviene de una hoja de estilos o de una clase, element.style.color devuelve un string vacío. Para leer el valor que el navegador realmente aplicó — tras resolver las hojas de estilos, las clases y la herencia — usa window.getComputedStyle():

<p id="styledByCss">I am styled by a stylesheet.</p>
<button onclick="readStyle()">Read computed color</button>

<script>
  function readStyle() {
    const element = document.getElementById('styledByCss');
    // element.style.color would be '' — the color comes from CSS, not inline.
    const computed = window.getComputedStyle(element);
    alert('Computed color: ' + computed.color);
  }
</script>

<style>
  #styledByCss {
    color: green;
  }
</style>

Los valores calculados se devuelven en formato normalizado y de solo lectura — los colores como rgb(...), las longitudes en px — por lo que getComputedStyle(element).color devuelve 'rgb(0, 128, 0)' en lugar de 'green'.

Manipulación de Clases

Gestionar clases es la forma recomendada de aplicar estilos a los elementos: el estilo reside en tu CSS y JavaScript solo activa o desactiva clases. La propiedad classList expone una API pequeña y bien nombrada — add(), remove(), toggle(), contains(), replace() e item() — que es más clara y segura que construir strings con className.

¿Por qué preferir classList sobre className? Escribir element.className = 'highlight' sobrescribe todas las clases existentes, por lo que puedes eliminar accidentalmente clases de las que depende otra parte de tu código. classList.add('highlight') añade solo esa clase y deja el resto intacto.

Añadir Clases

El método add() añade una o más clases a un elemento. Añadir una clase que ya está presente no hace nada, por lo que es seguro llamarlo repetidamente.

Ejemplo

<div id="addClassExample">This element will have classes added.</div>
<button onclick="addClass()">Add Class</button>

<script>
  function addClass() {
    const element = document.getElementById('addClassExample');
    element.classList.add('highlight', 'text-large');
  }
</script>

<style>
  .highlight {
    background-color: yellow;
  }

  .text-large {
    font-size: 24px;
  }
</style>

En este ejemplo, al hacer clic en el botón se añadirán las clases highlight y text-large al elemento div, aplicando los estilos correspondientes.

Eliminar Clases

El método remove() elimina una o más clases de un elemento. Eliminar una clase que no existe no genera ningún error, por lo que no es necesario comprobarlo primero.

Ejemplo

<div id="removeClassExample" class="highlight text-large">
  This element will have classes removed.
</div>
<button onclick="removeClass()">Remove Class</button>

<script>
  function removeClass() {
    const element = document.getElementById('removeClassExample');
    element.classList.remove('highlight', 'text-large');
  }
</script>

<style>
  .highlight {
    background-color: yellow;
  }

  .text-large {
    font-size: 24px;
  }
</style>

Aquí, al hacer clic en el botón se eliminarán las clases highlight y text-large del elemento div.

Alternar Clases

El método toggle() añade una clase si no está presente y la elimina si lo está — perfecto para estados de activado/desactivado, como un menú abierto o una tarea completada. Devuelve true si la clase está presente después de la llamada y false en caso contrario.

También puedes forzar el resultado con un segundo argumento boolean: toggle('active', true) siempre añade la clase, y toggle('active', false) siempre la elimina. Esto es práctico cuando el estado deseado proviene de una variable: element.classList.toggle('active', isActive).

Ejemplo

<div id="toggleClassExample">Click me to toggle the highlight class.</div>
<button onclick="toggleClass()">Toggle Class</button>

<script>
  function toggleClass() {
    const element = document.getElementById('toggleClassExample');
    element.classList.toggle('highlight');
  }
</script>

<style>
  .highlight {
    background-color: yellow;
  }

  .text-large {
    font-size: 24px;
  }
</style>

En este ejemplo, al hacer clic en el botón se activará o desactivará la clase highlight en el elemento div.

Comprobar Clases

El método contains() devuelve true si un elemento tiene una clase específica y false en caso contrario. Úsalo para ramificar según el estado actual, por ejemplo para actualizar la etiqueta de un botón.

Ejemplo

<div id="containsClassExample" class="highlight">
  This element's classes will be checked.
</div>
<button onclick="checkClass()">Check Class</button>

<script>
  function checkClass() {
    const element = document.getElementById('containsClassExample');
    if (element.classList.contains('highlight')) {
      alert('The element has the highlight class.');
    } else {
      alert('The element does not have the highlight class.');
    }
  }
</script>

<style>
  .highlight {
    background-color: yellow;
  }

  .text-large {
    font-size: 24px;
  }
</style>

Aquí, al hacer clic en el botón se comprobará si el elemento containsClassExample tiene la clase highlight y se mostrará una alerta en consecuencia.

Reemplazar una Clase

El método replace() intercambia una clase por otra en una sola llamada y devuelve true si la clase antigua existía y fue reemplazada. Es más limpio que llamar a remove() y luego a add():

<div id="replaceClassExample" class="theme-light">Switch my theme.</div>
<button onclick="swapTheme()">Toggle theme</button>

<script>
  function swapTheme() {
    const element = document.getElementById('replaceClassExample');
    if (!element.classList.replace('theme-light', 'theme-dark')) {
      // It wasn't 'theme-light', so swap the other way.
      element.classList.replace('theme-dark', 'theme-light');
    }
  }
</script>

<style>
  .theme-light { background: #fff; color: #111; padding: 8px; }
  .theme-dark { background: #111; color: #fff; padding: 8px; }
</style>

classList también es iterable, y classList.item(index) devuelve la clase en una posición determinada (o null si el índice está fuera de rango), lo que puede ser útil cuando necesitas leer las clases una a una.

Ejemplo Real: Lista de Tareas Interactiva

Para demostrar estos conceptos en un escenario real, vamos a construir una pequeña lista de tareas interactiva. Las nuevas tareas se añaden a la lista y hacer clic en una tarea activa o desactiva una clase completed que la tacha — un caso de libro para classList.toggle().

<div>
  <h2>To-Do List</h2>
  <p>Here, you can add new items, and mark it as completed by clicking on them.</p>
  <input type="text" id="newTask" placeholder="Add a new task" />
  <button id="addTaskButton">Add Task</button>
  <ul id="taskList"></ul>
</div>

<script>
  const newTaskInput = document.getElementById('newTask');
  const addTaskButton = document.getElementById('addTaskButton');
  const taskList = document.getElementById('taskList');

  addTaskButton.addEventListener('click', () => {
    const taskText = newTaskInput.value;
    if (taskText) {
      const taskItem = document.createElement('li');
      taskItem.textContent = taskText;
      taskItem.classList.add('task');

      taskItem.addEventListener('click', () => {
        taskItem.classList.toggle('completed');
      });

      taskList.appendChild(taskItem);
      newTaskInput.value = '';
    }
  });
</script>

<style>
  .task {
    cursor: pointer;
    padding: 5px;
    border-bottom: 1px solid #ccc;
  }

  .task.completed {
    text-decoration: line-through;
    color: gray;
  }
</style>

En este ejemplo, creamos una aplicación de lista de tareas donde se pueden añadir tareas y marcarlas como completadas haciendo clic en ellas. La clase task aplica estilo a las tareas, mientras que la clase completed, aplicada con el método toggle(), indica las tareas completadas.

Buenas Prácticas

Para garantizar un código eficiente y mantenible al trabajar con estilos en el DOM, considera las siguientes buenas prácticas:

1. Separación de responsabilidades: Mantén tu HTML, CSS y JavaScript separados. Usa JavaScript para manipular clases en lugar de establecer estilos directamente siempre que sea posible. Este enfoque preserva la separación de responsabilidades y hace que tu código sea más fácil de mantener.
2. Evita los Estilos en Línea: Usa los estilos en línea con moderación. Los estilos en línea pueden hacer que tu HTML sea más desordenado y difícil de mantener. En su lugar, prefiere añadir y eliminar clases que están definidas en tu CSS.
3. Usa Clases para la Reutilización: Define clases reutilizables en tu CSS y usa JavaScript para alternarlas. Este enfoque permite un estilo más consistente en toda tu aplicación y facilita la actualización de estilos.
4. Aprovecha los Métodos de classList: Usa los métodos de classList (add, remove, toggle, contains) para gestionar las clases de forma eficiente. Estos métodos son sencillos y tienen buen rendimiento en comparación con manipular directamente la propiedad className.
5. Consideraciones de Rendimiento: Ten en cuenta el rendimiento al manipular el DOM. Alternar una sola clase desencadena un único recálculo de estilos, mientras que establecer muchas propiedades una a una en element.style puede causar reflujos repetidos. Para una orientación más profunda, consulta DOM Performance Optimization.

Conclusión

Manipular estilos en el DOM es esencial para crear interfaces dinámicas e interactivas. Usa la propiedad style (y cssText) para valores que calculas en tiempo de ejecución, getComputedStyle() para leer los estilos que el navegador realmente aplicó, y la API classList — add, remove, toggle, contains, replace — para todo lo que represente un estado reutilizable. Como regla general, recurre primero a las clases y a los estilos en línea solo cuando sea imprescindible.

Para seguir aprendiendo sobre el DOM, explora DOM Manipulation, Selecting DOM Elements y Attributes and Properties.

Práctica