¿Existe un método de navegación cruzada para obtener los valores CSS utilizados de todas las propiedades de todos los elementos?

Question

Estoy buscando obtener los valores CSS usados ​​de todos los elementos DOM en una página. Cuando digo "los valores usados" Me refiero a la definición como se especifica en the W3C specification:

6.1.3 Los valores utilizados

valores calculados se procesan en la medida de lo posible sin formatear el documento. Sin embargo, algunos valores solo se pueden determinar cuando se está distribuyendo el documento. Por ejemplo, si el ancho de un elemento se establece para que sea un cierto porcentaje de su bloque contenedor, el ancho no se puede determinar hasta que se haya determinado el ancho del bloque contenedor. El valor usado es el resultado de tomar el valor calculado y resolver cualquier dependencia restante en un valor absoluto.

Estos deben ser los valores finales calculados con respecto al diseño de página real. Mozilla's docs afirme que puede usar window.getComputedStyle para obtener los valores utilizados, pero esto no tiene sentido para mí porque los valores calculados son diferentes de los valores utilizados (y quiero valores usados). Incluso si estos son los valores utilizados, no estoy seguro si esto solo funciona en Firefox o no. ¿Hay alguna manera de obtener de forma confiable los valores en todos los navegadores?

Answer 1

Creo que getComputedStylehace devuelve valores "usados" según esa definición. Funciona en todos los principales navegadores modernos. Las versiones anteriores de IE proporcionan un casi equivalente en la forma de currentStyle. Tenga en cuenta la última frase de la definición:

El utiliza el valor es el resultado de tomar el valor calculado y resolver las dependencias restantes en un valor absoluto .

(Mi énfasis al final.) por ejemplo, el "valor utilizado" es el valor que se utiliza realmente.

Por ejemplo, este código me demuestra "500px" o similar, no "50%":

HTML:

<div id="target" style="display: inline-block; width: 50%">x</div> 

JavaScript:

(function() { 

    var target = document.getElementById("target"); 
    var style = window.getComputedStyle(target); 
    display("computed width = " + style.width); 

    function display(msg) { 
    var p = document.createElement('p'); 
    p.innerHTML = String(msg); 
    document.body.appendChild(p); 
    } 
})(); 

Live copy | source

Answer 2

Puede usar jQuery u otra biblioteca preferida en la mayoría de los casos.

Por ejemplo, el título de su pregunta tiene font-size:100% aplicado, que se puede recuperar con firebug. Pero con jQuery api puede recuperar el valor utilizado de esta manera:

$('#question-header .question-hyperlink').css('font-size');//run in console 
//or enter this in the url bar 
//javascript:alert($('#question-header .question-hyperlink').css('font-size')); 
//returns "23.06px" 

NB la biblioteca se incluye en esta página, pero sería bastante trivial para crear un bookmarklet que incluye jQuery y sondeos de las propiedades necesarias.