¿Cómo obtener los valores de estilo de un elemento HTML en javascript?

Question

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> 

Busco Javascript recta sin el uso de las bibliotecas.

He intentado lo siguiente, pero seguir recibiendo los espacios en blanco:

alert (document.getElementById("box").style.width); 
alert (document.getElementById("box").style.getPropertyValue("width")); 

me di cuenta de que sólo soy capaz de utilizar el anterior si he puesto el estilo usando javascript, pero no pudo con las etiquetas de estilo.

Answer 1

La propiedad element.style le permite saber sólo las propiedades CSS que se definieron como en línea en ese elemento (mediante programación, o definido en el atributo de estilo del elemento), debe obtener la estilo computarizada.

no es tan fácil de hacerlo de una manera multi-navegador, IE tiene su propia manera, a través de la propiedad element.currentStyle, y el DOM Nivel 2 estándar manera, implementado por otros navegadores es a través del método de document.defaultView.getComputedStyle.

Las dos formas tienen diferencias, por ejemplo, la propiedad de IE element.currentStyle esperar que se accede a los nombres de las propiedades de CCS compuestas de dos o más palabras en camelCase (por ejemplo maxHeight, fontSize, backgroundColor, etc), la forma estándar de espera las propiedades con las palabras separadas con guiones (por ejemplo, max-height, font-size, background-color, etc.).

Además, IE element.currentStyle devolverá todos los tamaños en la unidad que se especificaron (por ejemplo, 12pt, 50%, 5em), la forma estándar calculará siempre el tamaño real en píxeles.

que hice hace algún tiempo una función multi-navegador que le permite obtener los estilos calculados de un modo multi-navegador:

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 perfecto para algunos casos, por ejemplo para los colores , el método estándar devolverá colores en la notación rgb (...), en IE, los devolverán tal como se definieron.

Actualmente estoy trabajando en un artículo sobre el tema, puede seguir los cambios que realizo en esta función here.

Answer 2

En jQuery, puede hacer alert($("#theid").css("width")).

- si no has echado un vistazo a jQuery, lo recomiendo encarecidamente; hace que muchas tareas simples de JavaScript sean fáciles.

actualización

para el registro, esta entrada es de 5 años de edad. La web se ha desarrollado, avanzado, etc. Hay formas de hacer esto con Plain Old Javascript, que es mejor.

Answer 3

Creo que ahora son capaces de utilizar window.getComputedStyle()

Documentation MDN

var style = window.getComputedStyle(element[, pseudoElt]); 

Answer 4

Mediante el uso de css() en jQuery la etiqueta de estilo se puede acceder y modificar

por ejemplo:

var color = $(this).css("background-color"); 
    $("#result").html("That div is <span style='color:" + 
    color + ";'>" + color + "</span>.");