Javascript CSS visability.

Question

It seems that javascript only can ready inline css if i want to check if element is display:hidden getting it with:

el.style.display

But how to check if display:none is placed inside external CSS file?

Answer 1

if(el.style.display=='none') will work regardless of where the CSS is defined.

Answer 2

You'll need to access the computed style of the element with getComputedStyle (standards-compatible browsers) or currentStyle (IE). Google for those terms for examples or use a framework such as jQuery, which provide wrappers for that.

Answer 3

It might be the backwards way and not helpful in this case, but anyway:

If you want to check out what's in the loaded CSS files, you can get the loaded stylesheets with var sheets = document.styleSheets;, and access the first one with sheets[0];
Then, get the rules from it:

var rules = sheets[0].cssRules ? sheets[0].cssRules : sheets[0].rules;

Then loop through the rules to check them out:

var rule, selector;
for (var idx=0, len=rules.length; idx<len; ++idx) {
  rule = rules[idx];
  selector = rule.selectorText;
  if (!selector) {continue;}
  console.log(selector+' => '+ rule.style.cssText);
}

This is more or less straight from David Flanagan's great book "Javascript, the Definitive Guide (5th ed.)"