Geek Answers Handbook

Fix Firefox with currentStyle vs getComputedStyle

I am trying to get the width of an element according to its CSS rules. The problem is that "getComputedStyle" returns a pixel value instead of "auto" for an element without a CSS width value. In Opera, "elem.currentStyle ['width']" returns "auto", but in firefox it should use "getComputedStyle", which returns something like "1149px".

It’s important for me to know what the actual CSS rule is. Is there any way to do this other than getComputedStyle? Firefox MDN clearly states that "getComputedStyle" is not the way to go, but I cannot find the documentation for the Firefox equivalent for "currentStyle".

If you want to know, my ultimate goal is to find the largest static width element on the page. If I cannot read the values ​​of the styles - only the displayed / calculated values ​​- then how can I achieve this?

+5
source share
3 answers

If you start with an element, there is no way to know which style sheet rules apply to it. getComputedStyle()it just gives you an effective style value, and currentStylenot much different, even if it gives you the result you expect in this particular scenario and in this particular browser.

What you probably need to do is go through the stylesheets. Line by line:

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
    }
  }
}

, , document.querySelectorAll() rule.selectorText. , , . , .

:

+4

, , .

: , , - . , querySelectorAll. .

-

, , , , - -, , .

div {
    width: 35px;
    min-width: 1px; /* the flag */
    }

, [ComputedStyle].minWidth == '1px'.

, .

, . .

+1

,

element.clientWidth element.clientHeight

getcomputestyle

0

More articles:


All Articles