Estilos CSS: El objeto style

Hay dos formas principales de que un elemento HTML tenga estilos CSS: Asociándole una clase HTML con una colección de estilos, o añadiéndole un atributo style con un conjunto de propiedades y valores.

En general, lo recomendable suele ser utilizar las clases, ya que es más organizado y fácil de mantener, pero hay algunas excepciones donde podemos utilizar los estilos CSS y pueden ser especialmente interesantes.

Estilos en línea

Antes de continuar, vamos a recordar como se añaden estilos en línea a un elemento HTML:

<div id="title" style="background-color: indigo; padding: 25px; color: var(--color, #000);">
  <h1 style="--color: white">El objeto style</h1>
</div>

Observa que en el elemento <div> hemos establecido 3 estilos CSS diferentes:

Un background-color con el valor indigo (morado).
Un tamaño de padding con el valor de 25px.
El color de texto de la variable CSS --color, por defecto #000 (negro).

En general, es mucho mejor crear una clase con esta lista de estilos y añadirle la clase a la etiqueta HTML. Hay una excepción donde es realmente útil estos estilos en linea: con las variables CSS. En el elemento <h1> en lugar de una propiedad CSS, le hemos establecido una variable CSS, es decir, una propiedad personalizada, que permite reutilizar mejor.

Modificar estilos en línea

Desde Javascript, si queremos acceder a los estilos en línea definidos en este elemento, podemos hacerlo de varias formas:

const title = document.querySelector("#title");

title.getAttribute("style")   // "background-color: indigo; padding: 25px; ..."
title.style                   // CSSStyleDeclaration { 0: ..., 1: ..., ... }

1️⃣ Mediante .getAttribute("style"). Nos devuelve un . Complejo. Poco útil.
2️⃣ Mediante el objeto .style. Nos devuelve un objeto CSSStyleDeclaration. Ideal.

El objeto `.style`

Este objeto especial contiene todas las propiedades CSS asignables del elemento en cuestión, y podremos acceder a ellas como un objeto normal (o mediante otros mecanismos que veremos a continuación):

Método	Descripción
`.setProperty(propName, value, priority)`	Añade o cambia el valor de una propiedad o variable CSS.
`.getPropertyValue(propName)`	Obtiene el valor de una propiedad o variable CSS.
`.getPropertyPriority(propName)`	Devuelve `"important"` si tiene prioridad.
`.removeProperty(propName)`	Elimina una propiedad o variable CSS de un elemento.

Vamos a analizarlos a continuación.

Vía propiedades getPropertyValue setProperty

La forma más tradicional de acceder a los estilos, es mediante una propiedad correspondiente a la propiedad CSS, pero escrita en camelCase al estilo Javascript. Si la propiedad CSS se llama padding-top, en Javascript debes acceder a ella en camelCase, es decir, como paddingTop. Si accedes mediante la nomenclatura de corchetes, puedes acceder de ambas formas:

title.style.backgroundColor;  // "indigo"
title.style.color;            // "var(--color, #000)"
title.style.padding;          // "25px"
title.style.paddingLeft;      // "25px"
title.style.paddingTop;       // "25px"
title.style["paddingTop"]     // "25px"
title.style["padding-top"]    // "25px"
title.style.fontFamily        // ""

Observa que sólo algunas propiedades tendrán valores, que son las que están definidas en los estilos en línea del elemento HTML. Si un valor no está definido, devuelve cadena vacía.

Esta es una forma legacy y antigua, que aunque sigue funcionando, ofrece menos ventajas que utilizar la familia de las siguientes funciones que veremos.

El método `getPropertyValue()`

Aunque como hemos comentado, se puede acceder a través de propiedades directamente. Una manera más formal es a través del método getPropertyValue(). Este método sirve tanto para propiedades CSS como para variables CSS (que no están soportadas de la forma anterior):

title.style.getPropertyValue("background-color"); // "indigo"
title.style.getPropertyValue("color");            // "var(--color, #000)"
title.style.getPropertyValue("padding");          // "25px"
title.style.getPropertyValue("padding-left");     // "25px"
title.style.getPropertyValue("padding-top");      // "25px"
title.style.getPropertyValue("font-family");      // ""

const h1 = title.querySelector("h1");
h1.style.getPropertyValue("--color");             // "white"

De esta forma eliminamos el inconveniente de tener que estar traduciendo a camelCase, además de tener soporte con variables CSS, algo que no se puede realizar mediante propiedades.

El método `setProperty()`

De la misma forma, igual que podemos acceder a ellas, también podemos modificar las variables CSS. Recuerda que las variables CSS se pueden establecer a nivel del DOM, por lo que un elemento puede tener un valor de variable CSS y otro elemento del DOM un valor diferente (e incluso son heredables hacia hijos):

const h1 = title.querySelector("h1");
h1.style.setProperty("--color", "gold");
h1.style.getPropertyValue("--color");      // "gold"

Existe un tercer parámetro opcional. Si le indicamos un "important", añadirá un !important a la propiedad que estemos estableciendo.

Ten en cuenta que en todos estos casos, lo que estamos haciendo es añadir un estilo en línea al elemento, por lo que el elemento en cuestión tendrá un style="..." con los estilos en cuestión.

El método global `getComputedStyle()`

Al margen de todo lo anterior, existe un método global denominado getComputedStyle(). Al contrario que los anteriores, este método obtiene los estilos computados de un elemento. Se llaman estilos computados a los estilos CSS finales que ya han sido procesados y calculados por el navegador, después de aplicar herencia, cálculos, reglas, etc.

Si necesitamos obtener el valor CSS final de alguna propiedad que no ha sido definida a través de estilos en línea, utilizar getComputedStyle() puede ser una buena opción. Al igual que en el objeto style, el método getComputedStyle() devuelve un objeto CSSStyleDeclaration, que contiene propiedades con nombre de la propiedad CSS y el valor asociado:

const element = document.querySelector(".element");

getComputedStyle(element);      // CSSStyleDeclaration { 0: ..., 1: ..., ... }

// Elemento tiene una clase con background: #222

getComputedStyle(element).background
// "rgb(34, 34, 34) none repeat scroll 0% 0% / auto padding-box border-box"

getComputedStyle(element).backgroundColor
// "rgb(34, 34, 34)"

Observa que aunque los estilos originales tengan un valor de #222, los estilos computados devuelven rgb(34, 34, 34), ya que han sido procesados por el navegador, por lo que no debes esperar que se devuelva el valor exactamente igual.

Acceso a pseudoelementos

Con getComputedStyle(), también podemos acceder a los estilos CSS de los pseudoelementos, como por ejemplo ::after y ::before, los cuales no es posible recuperarlos directamente con querySelector(), por ejemplo:

const element = document.querySelector(".element");

getComputedStyle(element, "::after");      // CSSStyleDeclaration { 0: ..., 1: ..., ... }

Observa que en esta ocasión, estamos obteniendo los estilos definidos en el elemento con clase element, pero más concretamente en su pseudoelemento ::after.

Manipular estilos CSS de una etiqueta HTML