Obtener el estilo CSS de un elemento HTML

elem.style devuelve el estilo inline, id est, el que se incluye como atributo dentro de la etiqueta HTML correspondiente, y por tanto no permite obtener el estilo definido en una hoja de estilos CSS. Para esto hay que usar el método
var estilo= window.getComputedStyle(elem, null)

Así, por ejemplo, para obtener el ancho del elemento:

• elem.style.width devolverá el ancho si se definió de forma inline o la cadena vacía si no se hizo así
• estilo.width devolverá el ancho de elem especificado en una hoja de estilo

Hay que tener en cuenta que el método getComputedStyle es ineficiente (pues recorre toda la jerarquía CSS y crea un documento que puede ser bastante grande). También es importante tener en cuenta que el objeto devuelto por getComputedStyle es de sólo lectura y modificar sus atributos no modificará ni el elemento original ni el documento CSS correspondiente.

En IE se puede tener la misma funcionalidad a través de la propiedad no estándar currentStyle de cada objeto HTMLElement.

Etiquetas: CSS, diseño web, DOM