Como obtener valores de CSS con JavaScript JavaScript

  • Publicado el 21 octubre, 2019 - Actualizado el

Para obtener el valor de una propiedad CSS asignada a un elemento HTML se pueden utilizar varios métodos de JavaScript. Uno es utilizar la propiedad element.style y otro utilizar getComputedStyle(element), pero son muy diferentes y no son intercambiables.

En este post explicaremos qué hace exactamente cada método y como se deben utilizar.

Obtener el CSS con getComputedStyle(element)

Este es el método que se debe utilizar de forma general para obtener el CSS de un elemento.

getComputedStyle devuelve un objeto CSSStyleDeclaration. Este objeto tiene el método getPropertyValue con el que podemos obtener el valor de la propiedad CSS que nos interese.

let element = document.getElementById('text_1');
let elementStyle = window.getComputedStyle(element);
let elementColor = elementStyle.getPropertyValue('color');

El valor devuelto por getPropertyValue es una cadena texto que contiene el valor de la propiedad CSS especificada. Si la propiedad no ha sido establecida, se obtiene una cadena de texto vacía (texto de longitud cero).

También podemos obtener el valor de propiedades CSS para pseudo-elementos, por ejemplo, para el pseudo-elemento :hover:

let element = document.getElementById('link_1');
let elementStyle = window.getComputedStyle(element, 'hover');
let elementColor = elementStyle.getPropertyValue('color');

Lo más importante a tener en cuenta es que getComputedStyle(element) devuelve los valores CSS calculados por el navegador. Por tanto, obtenemos el CSS de todas las fuentes posibles (archivos .css, estilos in-line, etc).

También hay que tener en cuenta que el objeto CSSStyleDeclaration devuelto por getComputedStyle es de solo lectura. No podemos asignar nuevos estilos a través de este objeto. Por ejemplo, el siguiente código nos dará error:

let element = document.getElementById('text_1');
let elementStyle = window.getComputedStyle(element);
// La siguiente línea nos dará error
elementStyle.setProperty('color','red');

Obtener CSS con element.style

La propiedad style de un elemento contiene un objeto CSSStyleDeclaration, igual que el objeto devuelto por getComputedValue, pero con una gran diferencia. element.style solo accede a los estilos declarados en el atributo style de HTML.

Si el CSS del elemento ha sido declarado en un archivo CSS o dentro de una etiqueta <style>, no lo podemos leer con element.style.

Por ejemplo:

<div id="text_1" style="color: black; font-size: 16px">Some text</div>
let element = document.getElementById('text_1');
let fontColor = element.style.color;
let fontSize = element.style.fontSize;

Además, a diferencia de getComputedStyle, elment.style no es de solo lectura y se le pueden asignar nuevos valores directamente. Por ejemplo:

<div id="text_1" style="color: black; font-size: 16px">Some text</div>
let element = document.getElementById('text_1');
element.style.setProperty('color', 'blue');
element.style.setProperty('font-size', '24px');
/*
Las anteriores líneas son equivalentes a
element.style.color = "blue";
element.style.fontSize = "24px";
*/

Por tanto, getComputedStyle se debe utilizar de forma general para obtener valores CSS, mientras que element.style es mejor reservarlo para asignar propiedades CSS a un elemento específico.