¿Cómo obtener los valores de estilo de un elemento HTML en JavaScript?
Estoy buscando una manera de recuperar el estilo de un elemento que tiene un estilo establecido por la etiqueta de estilo.
<style>
#box {width: 100px;}
</style>
En el cuerpo
<div id="box"></div>
Estoy buscando JavaScript directo sin el uso de bibliotecas.
Intenté lo siguiente, pero sigo recibiendo espacios en blanco:
alert (document.getElementById("box").style.width);
alert (document.getElementById("box").style.getPropertyValue("width"));
Noté que solo puedo usar lo anterior si configuré el estilo usando javascript, pero no puedo con las etiquetas de estilo.
La element.stylepropiedad le permite conocer solo las propiedades CSS que se definieron como en línea en ese elemento (mediante programación o definidas en el atributo de estilo del elemento), debe obtener el estilo calculado .
No es tan fácil hacerlo en varios navegadores, IE tiene su propia manera, a través de la element.currentStylepropiedad, y la forma estándar DOM Nivel 2 , implementada por otros navegadores, es a través del document.defaultView.getComputedStylemétodo.
Las dos formas tienen diferencias, por ejemplo, la element.currentStylepropiedad IE espera que acceda a los nombres de propiedad CCS compuestos por dos o más palabras en camelCase (p. ej maxHeight., fontSize, backgroundColor, etc.), la forma estándar espera que las propiedades con las palabras separadas con guiones (p. ej. max-height, font-size, background-color, etc).
Además, IE element.currentStyledevolverá todos los tamaños en la unidad en la que se especificaron (por ejemplo, 12 puntos, 50 %, 5 em), la forma estándar siempre calculará el tamaño real en píxeles.
Hace algún tiempo creé una función para varios navegadores que le permite obtener los estilos calculados en varios navegadores:
function getStyle(el, styleProp) {
var value, defaultView = (el.ownerDocument || document).defaultView;
// W3C standard way:
if (defaultView && defaultView.getComputedStyle) {
// sanitize property name to css notation
// (hypen separated words eg. font-Size)
styleProp = styleProp.replace(/([A-Z])/g, "-$1").toLowerCase();
return defaultView.getComputedStyle(el, null).getPropertyValue(styleProp);
} else if (el.currentStyle) { // IE
// sanitize property name to camelCase
styleProp = styleProp.replace(/\-(\w)/g, function(str, letter) {
return letter.toUpperCase();
});
value = el.currentStyle[styleProp];
// convert other units to pixels on IE
if (/^\d+(em|pt|%|ex)?$/i.test(value)) {
return (function(value) {
var oldLeft = el.style.left, oldRsLeft = el.runtimeStyle.left;
el.runtimeStyle.left = el.currentStyle.left;
el.style.left = value || 0;
value = el.style.pixelLeft + "px";
el.style.left = oldLeft;
el.runtimeStyle.left = oldRsLeft;
return value;
})(value);
}
return value;
}
}
La función anterior no es perfecta para algunos casos, por ejemplo para los colores, el método estándar devolverá colores en la notación rgb(...) , en IE los devolverá tal como fueron definidos.
Actualmente estoy trabajando en un artículo sobre el tema, puedes seguir los cambios que hago en esta función aquí .
Creo que ahora puedes usar Window.getComputedStyle()
Documentación MDN
var style = window.getComputedStyle(element[, pseudoElt]);
Ejemplo para obtener el ancho de un elemento:
window.getComputedStyle(document.querySelector('#mainbar')).width