Controlar la apariencia visual de una página web desde JavaScript es una habilidad fundamental para crear interfaces dinámicas. Existen varias formas de lograrlo, pero cada una tiene implicaciones importantes relacionadas con la especificidad de CSS y el mantenimiento del código. Conocer sus ventajas y riesgos te permitirá tomar mejores decisiones al construir tus proyectos.
¿Cómo funciona la propiedad style en JavaScript?
La primera forma de modificar estilos es mediante la propiedad style [01:52]. Cuando seleccionas un elemento del DOM y le aplicas .style, lo que ocurre es que se agregan estilos en línea directamente sobre la etiqueta HTML. Esto tiene una consecuencia directa: por las reglas de especificidad en CSS, los estilos en línea tienen mayor prioridad que los estilos definidos en clases.
Por ejemplo, para cambiar el color de un título:
javascript
const title = document.querySelector('h1');
title.style.color = 'red';
Al ejecutar esto, el color del texto cambia de inmediato [03:18]. Si inspeccionas el HTML, verás que se agregó un atributo style="color: red;" directamente en la etiqueta <h1>. Este comportamiento puede generar problemas si no se gestiona con cuidado, ya que reescribe cualquier estilo que provenga de una clase CSS asignada al elemento.
¿Qué problemas genera reescribir estilos con style?
El caso más claro se observa al modificar un elemento que ya tiene estilos definidos en una clase. Si un menú tiene un background-color: blue en su clase CSS y ejecutas:
javascript
const menu = document.querySelector('menu');
menu.style.backgroundColor = 'red';
El fondo cambia a rojo de forma inmediata [05:15]. Al inspeccionar el elemento en el navegador, puedes ver cómo el color azul original aparece tachado, porque el estilo inline lo está sobrescribiendo. Lo mismo ocurre con cualquier otra propiedad, como el tamaño de fuente:
javascript
menu.style.fontSize = '25px';
Cada propiedad que agregues con .style se acumula como estilo en línea [06:28], reescribiendo por completo los valores que venían de la clase original. Por eso, esta técnica requiere saber exactamente qué clases y estilos tiene el elemento antes de intervenir.
¿Qué es className y cómo se diferencia de style?
La segunda forma de modificar estilos es con la propiedad className [07:10]. A diferencia de .style, esta propiedad no agrega estilos en línea, sino que trabaja directamente con las clases CSS del elemento.
Su funcionamiento es sencillo pero tiene una particularidad importante: cuando asignas un valor con className, sustituye completamente la clase que ya existía en el elemento. No agrega una clase adicional, sino que reemplaza la anterior.
javascript
menu.className = 'main-menu';
Al ejecutar esta línea [08:50], la clase original menu desaparece del elemento y es sustituida por main-menu. Si la nueva clase define, por ejemplo, que el color del texto sea verde, ese cambio se aplica de inmediato.
¿Qué sucede cuando conviven estilos inline y className?
Un detalle interesante aparece cuando el elemento ya tiene estilos en línea previamente agregados con .style. Al cambiar la clase con className, los estilos inline permanecen porque siguen teniendo mayor especificidad [09:30]. Sin embargo, la nueva clase sí puede aportar propiedades que no estén siendo sobrescritas por el inline.
En el ejemplo práctico, al asignar main-menu como clase:
- La clase
menu original fue reemplazada por completo.
- Los estilos inline de
backgroundColor y fontSize siguieron activos.
- El color de texto verde de
main-menu sí se aplicó porque no había un color definido en línea.
Esto demuestra que ambas técnicas interactúan entre sí y que el orden de especificidad en CSS sigue siendo determinante.
¿Cuándo usar cada método para modificar estilos?
La propiedad .style es útil para cambios puntuales y dinámicos, como responder a una interacción del usuario. Sin embargo, abusar de ella puede hacer que el código sea difícil de mantener y depurar.
La propiedad className es más adecuada cuando necesitas cambiar el estilo completo de un elemento, pero debes tener presente que elimina la clase anterior. Es fundamental conocer qué clases tiene el elemento para evitar perder estilos importantes.
- Usa
.style para modificaciones individuales y temporales.
- Usa
className cuando quieras aplicar un conjunto completo de estilos predefinidos.
- Ten siempre presente la especificidad CSS: los estilos inline ganan sobre las clases.
Experimenta en tu consola del navegador con estos métodos y observa cómo cambia el HTML en tiempo real. ¿Has tenido problemas de especificidad al combinar estas técnicas? Comparte tu experiencia.
