Check element CSS display with JavaScript
As sdleihssirhc says below, if the element's display
is being inherited or being specified by a CSS rule, you'll need to get its computed style:
return window.getComputedStyle(element, null).display;
Elements have a style
property that will tell you what you want, if the style was declared inline or with JavaScript:
console.log(document.getElementById('someIDThatExists').style.display);
will give you a string value.
If the style was declared inline or with JavaScript, you can just get at the style
object:
return element.style.display === 'block';
Otherwise, you'll have to get the computed style, and there are browser inconsistencies. IE uses a simple currentStyle
object, but everyone else uses a method:
return element.currentStyle ? element.currentStyle.display :
getComputedStyle(element, null).display;
The null
was required in Firefox version 3 and below.
For jQuery, do you mean like this?
$('#object').css('display');
You can check it like this:
if($('#object').css('display') === 'block')
{
//do something
}
else
{
//something else
}