Is there a cross-browser method to get used css values ​​of all properties of all elements?

I am looking to get the used css values ​​of all the DOM elements on the page. When I say "used values," I mean the definition specified in the W3C specification :

6.1.3 Values ​​used

The calculated values ​​are processed as far as possible without formatting the document. However, some values ​​can only be determined when laying out a document. For example, if the width of an element is specified as a certain percentage of its containing block, the width cannot be determined until the width of the containing block is determined. The value used is the result of taking the calculated value and resolving any remaining dependencies to an absolute value.

These should be the final values ​​calculated relative to the actual page layout. Mozilla docs claim that you can use window.getComputedStyleto get used values, but that doesn't make sense to me because the calculated values ​​are different from the values ​​used (and I want to use the values). Even if these are the values ​​used, I'm not sure if this only works in Firefox or not. Is there a way to reliably use the values ​​used in all browsers?

+5
source share
2 answers

getComputedStyle "" . . IE currentStyle. :

.

( .) , " " - , .

, "500px" , "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);
  }
})();

|

+3

jQuery .

, font-size:100%, w/firebug. jQuery api , :

$('#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 , , jQuery, .

-2

All Articles