Estilos Inline y getComputedStyle en JavaScript
Domina la manipulación de estilos CSS con JavaScript: element.style vs getComputedStyle, métodos modernos, pseudo-elementos y errores comunes que debes evitar.
TL;DR - Resumen rápido
- element.style SOLO lee/escribe estilos inline (atributo style='...'), ignora CSS externo.
- getComputedStyle(el) lee los estilos finales tras la cascada CSS, pero es de solo lectura.
- Usa setProperty() y removeProperty() para propiedades con guiones sin convertir a camelCase.
- getComputedStyle acepta segundo parámetro para leer estilos de pseudo-elementos (::before, ::after).
- Puedes leer y modificar CSS Custom Properties (variables) con getPropertyValue() y setProperty().
- cssText sobrescribe TODO el atributo style; usa += o Object.assign para agregar sin borrar.
- Error común: intentar escribir en getComputedStyle o leer .style esperando valores de CSS externo.
La Dualidad de los Estilos
En JavaScript, hay dos formas principales de interactuar con los estilos de un elemento, y confundirlas es uno de los errores más comunes entre desarrolladores. La pregunta clave es: ¿quieres saber qué estilos tiene aplicado un elemento después de que el navegador resuelva toda la cascada CSS, o quieres forzar un estilo nuevo directamente en el atributo style del elemento?
Esta distinción es fundamental porque element.style y getComputedStyle(element) trabajan en contextos completamente diferentes. El primero manipula el atributo HTML style, mientras que el segundo lee el resultado final tras aplicar todas las reglas CSS (hojas externas, etiquetas style, inline styles, inheritance, etc.).
- <strong>element.style</strong>: Lectura/escritura del atributo style. Alta especificidad. Ignora CSS externo.
- <strong>getComputedStyle()</strong>: Solo lectura. Ve el resultado final de la cascada CSS con valores absolutos.
- <strong>setProperty/removeProperty</strong>: API moderna para manipular estilos sin conversión camelCase.
Estilos Inline: La propiedad .style
La propiedad element.style es la interfaz para interactuar con el atributo HTML style del elemento.
Este ejemplo muestra cómo element.style modifica directamente el atributo HTML style. Las propiedades CSS con guiones (como background-color) se convierten a camelCase (backgroundColor) en JavaScript. Un detalle crucial: box.style.color retorna una cadena vacía si el color viene de CSS externo, aunque visualmente el elemento tenga color.
Especificidad inline
Los estilos aplicados vía .style tienen una especificidad muy alta (inline), por lo que casi siempre sobrescribirán a tus clases CSS, a menos que uses !important en el CSS.
camelCase vs kebab-case
JavaScript convierte las propiedades CSS con guiones a camelCase. Por ejemplo, background-color se convierte en backgroundColor, font-size en fontSize, etc. Sin embargo, existe una alternativa que te permite usar las propiedades tal cual aparecen en CSS.
Ambos enfoques son válidos. La notación camelCase es más común y tiene autocompletado en editores, mientras que getPropertyValue() permite copiar nombres directamente desde CSS sin conversión mental.
Métodos Modernos: setProperty y removeProperty
Además de la asignación directa, JavaScript ofrece métodos más explícitos y flexibles para manipular estilos. Estos métodos son especialmente útiles cuando trabajas con CSS Custom Properties o cuando necesitas manipular propiedades dinámicamente sin convertir nombres.
La ventaja principal de setProperty() es que acepta un tercer parámetro opcional para establecer la prioridad ('important'), lo que te permite crear estilos inline con !important programáticamente. removeProperty() es más semántico que asignar cadenas vacías y retorna el valor previo de la propiedad antes de eliminarla.
La Verdad: getComputedStyle()
Si .style solo ve lo inline... ¿cómo sé de qué color es realmente un botón si el color viene de un archivo CSS? Aquí entra window.getComputedStyle().
Este método devuelve un objeto CSSStyleDeclaration con todos los valores CSS calculados para ese elemento, resueltos a sus valores absolutos (px, colores rgb, etc.). Es crucial entender que estos valores son de solo lectura: no puedes hacer styles.color = 'red', eso no modificará nada.
Performance: Reflow costoso
Llamar a getComputedStyle() fuerza al navegador a recalcular el layout (reflow), lo cual es costoso. Si necesitas leer múltiples propiedades, hazlo en batch y evita intercalar lecturas con escrituras de estilos.
Leer Estilos de Pseudo-elementos
Una característica poco conocida de getComputedStyle() es que acepta un segundo parámetro opcional para leer los estilos de pseudo-elementos como ::before y ::after. Esto es especialmente útil cuando estos pseudo-elementos contienen contenido dinámico o estilos críticos.
Esta funcionalidad es invaluable para crear animaciones complejas, leer contenido generado con content, o depurar estilos de pseudo-elementos que no aparecen en las DevTools estándar.
CSS Custom Properties (Variables CSS)
Las CSS Custom Properties (variables CSS) se pueden leer y modificar tanto con element.style como con getComputedStyle(). Esto permite crear sistemas de temas dinámicos, ajustar paletas de colores en tiempo real, o responder a interacciones del usuario modificando variables globales.
Modificar variables CSS en :root o document.documentElement afecta a todo el documento, lo que lo convierte en una técnica poderosa para implementar temas oscuros, cambios de branding dinámicos, o ajustes de accesibilidad como tamaños de fuente aumentados.
Manipulación Masiva
A veces necesitas aplicar muchos estilos a la vez. Escribir 10 líneas de modificaciones de propiedades individuales es ineficiente.
La primera forma con cssText sobrescribe completamente el atributo style, borrando cualquier estilo inline previo. Esto es útil cuando quieres establecer múltiples estilos desde cero, pero peligroso si el elemento ya tiene estilos inline que quieres preservar. La alternativa con Object.assign() es más segura porque solo modifica las propiedades especificadas sin tocar el resto.
Cuidado con cssText
cssText borra cualquier estilo inline previo. Si solo quieres añadir estilos, concatena: el.style.cssText += '; color: red;' (¡no olvides el punto y coma inicial!).
Errores Comunes que Debes Evitar
Trabajar con estilos en JavaScript tiene varias trampas comunes que pueden causar bugs sutiles o código que simplemente no funciona como esperas. Estos son los errores más frecuentes y cómo evitarlos.
El primer error es intentar leer estilos externos con .style, que solo ve el atributo HTML. El segundo es olvidar las unidades al asignar valores numéricos. El tercero es intentar modificar getComputedStyle(), que es de solo lectura. Estos tres errores representan más del 80% de los problemas con estilos en JavaScript entre desarrolladores junior.
- <strong>Leer CSS externo con .style</strong>: Usa getComputedStyle() para leer valores de hojas de estilo.
- <strong>Olvidar unidades</strong>: width = 100 falla, debe ser width = '100px' o '100%'.
- <strong>Modificar getComputedStyle</strong>: Es solo lectura, usa element.style para escribir.
- <strong>No verificar null</strong>: Siempre verifica que el elemento existe antes de modificar sus estilos.
- <strong>Usar kebab-case en notación de punto</strong>: element.style.background-color falla, usa backgroundColor.
Resumen: Estilos en JavaScript
Conceptos principales:
- •element.style lee/escribe SOLO estilos inline (atributo style), ignora CSS externo completamente.
- •getComputedStyle() lee el resultado final tras la cascada CSS, pero es de solo lectura.
- •setProperty/removeProperty permiten usar propiedades CSS con guiones sin convertir a camelCase.
- •getComputedStyle acepta segundo parámetro para leer estilos de pseudo-elementos (::before, ::after).
- •CSS Custom Properties se leen con getPropertyValue() y se modifican con setProperty().
Mejores prácticas:
- •Usa getComputedStyle() para leer valores finales, no .style que solo ve inline.
- •Siempre incluye unidades (px, rem, %) al asignar valores numéricos de dimensiones.
- •Para múltiples estilos, usa Object.assign(el.style, {...}) en lugar de cssText.
- •Minimiza llamadas a getComputedStyle() porque fuerza reflow (costoso para performance).
- •Modifica variables CSS en :root para cambios globales de tema o paleta de colores.