Question

I am trying to get the width of an element according to it’s CSS rules The problem is that “getComputedStyle” returns a pixel value instead of “auto” for an element with no CSS width value set. In Opera, “elem.currentStyle[‘width’]” returns “auto”, but in firefox, it must use “getComputedStyle” which returns something like “1149px”.

It is vital for me to know what the actual CSS rule is. Is there some way of doing this besides besides getComputedStyle? The Firefox MDN makes it clear “getComputedStyle” is not the way to go, but I cannot find any documentation for a Firefox equivalent to “currentStyle”.

If you want to know, my end goal is to find the largest static-width element on the page.
If I cannot read stylesheet values – only rendered/computed values –
then how can I achieve this?

Answer 1

If you start with an element, there is no way to know which stylesheet rules applied to it. getComputedStyle() merely gives you the effective style value and currentStyle isn’t much different even though it happens to give you the result you expect in this particular scenario and this particular browser.

What you probably need to do is to go through the stylesheets instead. Along the lines of:

for (var i = 0; i < document.styleSheets.length; i++)
{
  var styleSheet = document.styleSheets[i];
  for (var j = 0; j < styleSheet.cssRules.length; j++)
  {
    var rule = styleSheet.cssRules[j];
    if (rule.type == 1)  // STYLE_RULE
    {
      // Do something with rule.style.width
    }
  }
}

If you then need to locate elements matching that rule you can use document.querySelectorAll() with rule.selectorText. The remaining problem is that multiple style rules might apply to the same element and the specificity of the rule needs to be calculated. Not sure how much this is a problem for you however.

Additional documentation:

• CSSStyleSheet
• CSSStyleRule