Modificar Estilos CSS en Elementos con JavaScript

Modificar estilos CSS con JavaScript es una necesidad común cuando trabajamos con interfaces dinámicas. Desde cambiar el color de un botón hasta aplicar reglas visuales en tiempo real, esta técnica es esencial para cualquier desarrollador frontend.

Una de las formas más directas de lograrlo es usando la propiedad .style (element.style), que permite aplicar estilos en línea directamente sobre un elemento HTML. Aunque su uso es sencillo, implica consideraciones técnicas y buenas prácticas que debes conocer.

En este artículo aprenderás cómo modificar estilos CSS con JavaScript usando .style, cómo manejar unidades de medida correctamente, cómo trabajar con propiedades CSS especiales y qué limitaciones debes tener en cuenta.

Modificar Estilos CSS con JavaScript usando .style

La propiedad .style nos permite acceder y modificar los estilos en línea de un elemento. Estos estilos tienen una prioridad alta en el navegador, ya que se aplican directamente al atributo style del HTML.

element.style

Imaginemos un botón con un identificador simple:

<button id="accion">Haz clic</button>

Ahora aplicamos un estilo de fondo y color de texto con JavaScript:

const boton = document.getElementById("accion");
boton.style.backgroundColor = "#4CAF50";
boton.style.color = "white";
boton.style.fontSize = "18px";

En el anterior código:

• backgroundColor modifica el color de fondo.
• color cambia el color del texto.
• fontSize define el tamaño de la fuente.

El resultado en el DOM seria:

<button id="accion" style="background-color: #4CAF50;color: white;font-size: 18px;">Haz clic</button>

JavaScript convierte automáticamente las propiedades CSS que contienen guiones (background-color, font-size) a camelCase (backgroundColor, fontSize) ya que los guiones no son válidos en nombres de propiedades JS.

Detalles técnicos importantes de .style

Cuando accedes a .style no obtienes un texto ni un objeto plano. Lo que devuelve es una instancia de CSSStyleDeclaration, este es un objeto especial que representa todas las propiedades de estilo disponibles para ese elemento.

console.log(typeof boton.style); // "object"
console.log(boton.style instanceof CSSStyleDeclaration); // true

Esto te permite acceder a propiedades como style.backgroundColor directamente, pero también usar métodos avanzados como .getPropertyValue() o .setProperty() para trabajar con propiedades más complejas.

Si necesitas trabajar con propiedades que contienen guiones, como -webkit-text-stroke, no puedes usar la notación de punto:

// ❌ Incorrecto
boton.style.-webkit-text-stroke = "1px black";

En su lugar, debes usar corchetes:

// ✅ Correcto
boton.style["-webkit-text-stroke"] = "1px black";

Este patrón también es útil cuando el nombre de la propiedad se genera dinámicamente.

Por otro lado, puedes ajustar valores existentes sumando nuevas cantidades, lo cual es útil en casos como animaciones, crecimiento dinámico o cambios progresivos:

const caja = document.getElementById("caja");
caja.style.width = "100px";
caja.style.width = parseInt(caja.style.width) + 50 + "px"; // "150px"

Este enfoque te permite modificar estilos sin sobrescribir completamente el valor original.

Consideraciones sobre las unidades de medida

Cuando trabajamos con propiedades que requieren valores numéricos (como width, height, margin, padding, etc.), debemos incluir explícitamente la unidad, como "px", "em", "%", etc.

caja.style.width = "200px";      // Correcto
caja.style.marginTop = "1.5em";  // Correcto

Si omites la unidad, el estilo no se aplicará correctamente:

caja.style.height = 300; // Incorrecto, se ignorará

Recuerda: .style espera siempre una cadena que incluya la unidad correspondiente.

Sobrescritura y prioridad de los estilos

Los estilos aplicados con .style se consideran estilos en línea, lo que significa que tienen mayor prioridad que las reglas CSS definidas en hojas externas o internas, salvo que estas usen !important.

Por ejemplo, si tienes este estilo en tu CSS:

#accion {
  background-color: red;
}

Y luego aplicas desde JavaScript:

boton.style.backgroundColor = "blue";

El botón se mostrará azul, porque el estilo en línea sobreescribe la regla del archivo CSS. Este comportamiento es útil cuando necesitas un cambio inmediato, pero puede interferir con tu sistema de clases CSS si no se usa con cuidado.

Limitaciones de usar .style en línea

Aunque .style es útil para cambios puntuales, presenta varias limitaciones:

• No interactúa con las clases CSS, por lo que no puedes heredar estilos definidos en hojas externas.
• Puede generar conflictos visuales si ya existen reglas CSS aplicadas.
• No es práctico para aplicar múltiples reglas o gestionar estados visuales complejos.

Por eso en la mayoría de los casos es preferible utilizar clases CSS y alternarlas con classList.

Buenas Prácticas al Modificar Estilos con JavaScript

✔ Usa .style solo para modificaciones específicas y en tiempo real.
✔ Siempre incluye la unidad cuando corresponda.
✔ Accede a propiedades complejas usando [].
✔ Para estilos complejos, usa clases y element.classList.add() o toggle().
✔ Nunca combines .style con !important.

Una alternativa recomendada es usar clases controladas por lógica:

// Buena práctica
boton.classList.add("activo");

// Y en CSS:
.activo {
  background-color: green;
  color: white;
}

Esto mantiene el código limpio, mantenible y escalable, especialmente en proyectos grandes o con múltiples desarrolladores.

Conclusión

Modificar estilos CSS con JavaScript es una herramienta poderosa, pero que debe usarse con criterio. La propiedad .style te permite aplicar cambios visuales inmediatos, aunque con limitaciones que debes entender para evitar conflictos o código difícil de mantener.

En este artículo aprendiste a:

• Usar correctamente element.style.
• Aplicar unidades adecuadas.
• Trabajar con propiedades avanzadas.
• Evitar errores comunes.
• Aplicar buenas prácticas para mantener tu código limpio.

En el próximo artículo aprenderás a leer los estilos reales aplicados a un elemento con getComputedStyle(), una herramienta fundamental cuando necesitas inspeccionar el resultado final del CSS.