Функción getComputedStyle

La función getComputedStyle permite obtener el valor de cualquier propiedad CSS de un elemento, incluso desde un archivo CSS.

Sintaxis

javascriptlet objeto = getComputedStyle(elemento);

Detalles

Cómo funciona (atención: no como esperamos): la función toma como parámetro el elemento, y devuelve un objeto que contiene todas las propiedades CSS del elemento pasado. Pongamos este objeto en una variable style. El nombre es arbitrario, es solo una variable - como la ideemos, así la usaremos:

javascriptlet elem = document.querySelector('#elem');
let style = getComputedStyle(elem); // en style están las propiedades CSS

Mostremos, por ejemplo, el ancho. Se hace así - style.width:

javascriptlet elem = document.querySelector('#elem');

let style = getComputedStyle(elem);
console.log(style.width);

Para mostrar, por ejemplo, el padding izquierdo - lo hacemos así - style.paddingLeft:

javascriptlet elem = document.querySelector('#elem');

let style = getComputedStyle(elem);
console.log(style.paddingLeft);

En el siguiente ejemplo mostraremos todas las propiedades CSS que nos interesan para nuestro elemento:

html<div id="elem">texto</div>

css#elem {
  width: 200px;
  height: 200px;
  padding: 30px;
  border: 20px solid #BCBCBC;
  overflow: auto;
}

javascriptlet elem = document.querySelector('#elem');

let style = getComputedStyle(elem);
console.log('paddingLeft: ' + style.paddingLeft); // mostrará '30px'
console.log('borderTopWidth: ' + style.borderTopWidth); // mostrará '20px'
console.log('borderTopStyle: ' + style.borderTopStyle); // mostrará 'solid'

Imprecisión de getComputedStyle

A veces la función getComputedStyle funciona no del todo correctamente con el ancho y la altura. Esto se debe a que el padding y el borde expanden el bloque. En el siguiente ejemplo, al bloque se le da un ancho de 200px, así como un borde y border. El ancho real del bloque es de 300px, pero getComputedStyle igual mostrará 200px:

html<div id="elem">texto</div>

css#elem {
  width: 200px;
  height: 200px;
  padding: 30px;
  border: 20px solid #BCBCBC;
  overflow: auto;
}

javascriptlet elem = document.querySelector('#elem');

let style = getComputedStyle(elem);
console.log('width: ' + style.width); // mostrará '200px'
console.log('height: ' + style.height); // mostrará '200px'

Es decir: resulta que getComputedStyle ignora la expansión del bloque y muestra sus dimensiones como si esa expansión no existiera. Pero eso no es todo: también importa la presencia o ausencia de la barra de desplazamiento - algunos navegadores restan el ancho de la barra de desplazamiento del ancho calculado mediante getComputedStyle, y otros no lo restan. En fin, aquí en general todo no es cross-navegador y es mejor no usar getComputedStyle para determinar el ancho y la altura, y usar las métricas que estudiaremos un poco más abajo.

Valores calculados

Hay otro matiz: si el ancho se establece en % - luego de trabajar getComputedStyle veremos este en px. Es decir, en esencia no obtenemos el ancho establecido, sino el calculado. Mire el siguiente ejemplo:

html<div id="elem">texto</div>

css#elem {
  width: 30%; /* el ancho se establece en % */
  height: 200px;
  padding: 30px;
  border: 20px solid #BCBCBC;
  overflow: auto;
}

javascriptlet elem = document.querySelector('#elem');

let style = getComputedStyle(elem);
console.log('width: ' + style.width); // mostrará el ancho en px

Véase también