How to check visibility property using javascript

Question

I checked the visibility of the following div:

<div id="div1">div</div> 

with style defined separately

 #div1 { visibility:visible; //or hidden } 

If the style is defined inline as <div id="div1" style="visibility:visible">div</div> , there it is easy to check visibility in the element.style.visibility property. But the problem is that the style is defined separately (as shown above - # div1, .div1 or div).

So where can I check the visibility property using only pure javascript? jQuery returns the correct style every time (I don’t know how to track it), so how did they do it? Here is one fiddle with my failed attempts, no tests, except for jQuery:

 alert($(el).css('visibility')); // jQuery works well - returns correct property alert(el.style.visibility); // not works - always empty string alert(el.offsetWidth > 0 || el.offsetHeight > 0 ? 'yes':'no'); // also not working - always true - http://stackoverflow.com/questions/1343237/how-to-check-elements-visibility-via-javascript alert(el.getComputedStyle); // undefined - http://stackoverflow.com/questions/4795473/check-visibility-of-an-object-with-javascript alert(el.getAttribute('visibility')); // not works - of course null 

Any ideas on how to succeed? Tested in the latest Firefox 15.

Answer 1

getComputedStyle is a global method. Use it as follows:

 window.getComputedStyle(el, null).getPropertyValue('visibility'); 

Answer 2

You are using getComputedStyle incorrectly:

 getComputedStyle( el ).visibility //"visible" 

Demo: http://jsfiddle.net/hMFry/1/

In Internet Explorer, you should use:

 el.currentStyle.visibility; 

Answer 3

 getComputedStyle(el).getPropertyValue('visibility');