Estilos y Clases en JavaScript

Introducción

Hay dos formas de cambiar el aspecto de un elemento desde JavaScript:

1. Agregar o eliminar una clase CSS — el estilo vive en una hoja de estilos, y JavaScript solo activa o desactiva la clase. Este es el enfoque preferido.
2. Establecer un estilo en línea directamente en el elemento con la propiedad style — útil cuando el valor se calcula en tiempo de ejecución (por ejemplo, una posición que depende del ratón).

Este capítulo cubre ambos enfoques: las APIs className y classList para trabajar con clases, la propiedad style y cssText para estilos en línea, y getComputedStyle para leer los estilos finales que el navegador realmente aplicó. Para una visión más completa de CSS y el DOM, consulta Trabajar con Estilos en el DOM.

La propiedad style

Manipulación Directa de Estilos

La propiedad style es un object cuyos keys son las propiedades CSS en línea del elemento. Para modificar el estilo de un elemento directamente mediante JavaScript, asigna un valor a uno de esos keys. A continuación se muestra un ejemplo de cómo cambiar el color de fondo y el tamaño de fuente de un párrafo:

<!-- snippet: html-result -->

<style>
  #myParagraph {
    color: white; /* Ensures text is readable on a blue background */
  }
</style>
<div id="myParagraph">This is a paragraph.</div>
<script>
document.getElementById("myParagraph").style.backgroundColor = "blue";
document.getElementById("myParagraph").style.fontSize = "16px";
</script>

Fíjate en los nombres de las propiedades: CSS usa guiones (background-color, font-size), pero el object style usa camelCase (backgroundColor, fontSize). Las propiedades con varias palabras siempre siguen esta regla, y las propiedades con prefijo mantienen el guion inicial como letra mayúscula (-moz-border-radius se convierte en MozBorderRadius). Los valores son siempre strings, y los valores CSS numéricos deben incluir su unidad — el.style.fontSize = "16px", no 16.

Asignar a el.style.backgroundColor escribe en el atributo style="..." del elemento, por lo que solo afecta a ese elemento y anula las reglas de la hoja de estilos (tiene el mismo peso que un estilo en línea del autor). Para eliminar un valor en línea, asigna un string vacío: el.style.fontSize = "".

Este método ofrece un control directo, pero puede resultar tedioso para múltiples cambios de estilo.

Usar style.cssText

Para aplicar múltiples cambios de estilo de forma eficiente, usa style.cssText:

<!-- snippet: html-result -->

<style>
  #myParagraph {
    padding: 5px;
    width: 200px;
    text-align: center;
  }
</style>
<div id="myParagraph">Another paragraph.</div>
<script>
document.getElementById("myParagraph").style.cssText = "background-color: blue; font-size: 16px; border: 1px solid black";
</script>

Este enfoque consolida los cambios de estilo en una sola operación. Ten en cuenta que cssText reemplaza todo el estilo en línea, eliminando cualquier propiedad ya establecida en el elemento. Úsalo cuando quieras empezar desde cero; usa asignaciones individuales con style.* cuando quieras cambiar una propiedad y dejar el resto intacto.

Leer estilos con getComputedStyle

La propiedad style solo refleja los estilos en línea — valores establecidos en el atributo style o mediante JavaScript. Devuelve un string vacío para cualquier valor proveniente de una hoja de estilos. Para leer el valor final y resuelto que el navegador realmente renderizó (de cada hoja de estilos, regla en línea y valor heredado), usa getComputedStyle:

<!-- snippet: html-result -->

<style>
  #box { width: 10em; padding: 5px; }
</style>
<div id="box">Measure me</div>
<script>
const box = document.getElementById("box");
const styles = getComputedStyle(box);
// Computed values are resolved to absolute units (px), not the "10em" we wrote:
console.log(styles.width);   // "160px" (10em at the default 16px font size)
console.log(styles.padding); // "5px"
</script>

Algunas reglas a recordar:

• El object devuelto es solo de lectura — asignarle valores no tiene efecto; usa element.style para cambiar estilos.
• Los valores están resueltos: las longitudes se devuelven en píxeles, los colores en formato rgb(...).
• Siempre lee una propiedad específica (getComputedStyle(el).marginTop), y prefiere el nombre largo — algunas propiedades abreviadas (margin, padding) se devuelven de forma inconsistente entre navegadores.

className vs classList

Hay dos formas de leer y escribir las clases de un elemento:

• element.className es un string único que contiene todo el atributo class. Asignarle un valor reemplaza todas las clases a la vez: el.className = "active warning". Resulta práctico para establecer todas las clases desde cero, pero es incómodo para cambiar solo una.
• element.classList es un object especial con métodos para trabajar con clases individuales — add, remove, toggle, contains y replace. Este es el que usarás la mayoría de las veces, ya que permite cambiar una clase sin afectar las demás.

Los métodos son:

(La propiedad se llama className, no class, porque class es una palabra reservada en JavaScript — consulta Atributos y Propiedades.)

Agregar y Eliminar Clases

Usar la API classList facilita la manipulación de clases.

Agregar una Clase

<!-- snippet: html-result -->

<style>
  .new-class {
    font-weight: bold;
    color: green;
  }
</style>
<div id="myDiv">Class manipulation</div>
<script>
document.getElementById("myDiv").classList.add("new-class");
</script>

Eliminar una Clase

<!-- snippet: html-result -->

<style>
  .existing-class {
    text-decoration: underline;
    color: red;
  }
</style>
<div id="myDiv" class="existing-class">Another manipulation example</div>
<script>
document.getElementById("myDiv").classList.remove("existing-class");
</script>

Alternar una Clase

La funcionalidad de alternancia es eficaz para cambiar estilos como temas:

<!-- snippet: html-result -->

<style>
  .dark-mode {
    background-color: black;
    color: white;
  }
</style>
<button id="toggleButton">Toggle Dark Mode</button>
<script>
document.getElementById("toggleButton").addEventListener("click", function() {
  document.body.classList.toggle("dark-mode");
});
</script>

Manejar Múltiples Clases

Administra varias clases simultáneamente:

<!-- snippet: html-result -->

<style>
  .first-class { background-color: yellow; }
  .second-class { border: 2px dashed blue; }
  .third-class { display: none; }
  .fourth-class { font-size: 14px; }
</style>
<div id="myDiv">Multiple class handling</div>
<script>
document.getElementById("myDiv").classList.add("first-class", "second-class");
document.getElementById("myDiv").classList.remove("third-class", "fourth-class");
</script>

Verificar y Reemplazar Clases

Usa contains para bifurcar según si una clase está presente, y replace para intercambiar una clase por otra en una sola llamada:

const el = document.getElementById("myDiv");

el.classList.contains("active"); // false

el.classList.add("active");
el.classList.contains("active"); // true

// Swap "active" for "disabled" (returns true if the swap happened):
el.classList.replace("active", "disabled"); // true
el.classList.contains("active");            // false
el.classList.contains("disabled");          // true

toggle también acepta un segundo argumento opcional que fuerza el resultado: classList.toggle("open", isOpen) agrega la clase cuando isOpen es true y la elimina cuando es false, lo cual es conveniente cuando el estado deseado ya está en un boolean.

Buenas Prácticas: Clases vs. Estilos en Línea

Prefiere las clases sobre los estilos en línea. Mantén el estilo en tu CSS y deja que JavaScript solo alterne un nombre de clase. Esto mantiene separadas la presentación y el comportamiento, de modo que los diseñadores pueden cambiar el aspecto sin tocar los scripts, la misma clase puede reutilizarse en muchos elementos, y los estilos permanecen en un único lugar donde se pueden buscar.

Recurre a element.style solo cuando un valor realmente deba calcularse en tiempo de ejecución — la posición de un elemento que sigue al ratón, un ancho derivado de datos, un color seleccionado por el usuario. Estos valores no pueden vivir en una hoja de estilos estática, por lo que un valor en línea es la herramienta adecuada.

Cuando un cambio de clase deba animarse en lugar de producirse de forma instantánea, define una transition CSS en la propiedad y deja que alternar la clase la impulse. El navegador gestiona la animación en su propio camino optimizado, lo cual es más fluido que cambiar valores desde JavaScript. Consulta Animaciones CSS para más detalles.

Conclusión

Usa classList (add, remove, toggle, contains, replace) para gestionar clases y deja que tu hoja de estilos realice el trabajo visual; recurre a element.style solo para valores que deban calcularse en tiempo de ejecución; y lee los valores finales aplicados con getComputedStyle — recordando que es solo de lectura. Mantener el estilo en CSS y dejar que JavaScript alterne clases conduce a un código más fácil de mantener y más rápido de renderizar.

Práctica