CODEWITHSUNDEEP
javascriptcssproperties
Stano
Stano

Reputation: 8949

How to check the visibility property with javascript

I tested the visibility of the following div:

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

with the 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's easy to check the visibility in the element.style.visibility property. But the problem is when the style is defined separately (as shown above - #div1, .div1 or div).

And so where can one check the visibility property using only pure javascript? jQuery returns correct style everytime (I dunno how to track it), so how did they do it? Here is one fiddle with my unsuccesful attempts, no tests except jQuery's work:

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 latest Firefox 15.

Upvotes: 4

Views: 4429

Answers (3)

Danil Speransky
Danil Speransky

Reputation: 30453

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

Upvotes: 2

Esailija
Esailija

Reputation: 140230

You are using getComputedStyle wrong:

getComputedStyle( el ).visibility
//"visible"

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

In internet explorer you would use:

el.currentStyle.visibility;

Upvotes: 3

Rob W
Rob W

Reputation: 349012

getComputedStyle is a global method. Use it as follows:

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

Upvotes: 6

Related Questions