Check element CSS display with JavaScript
JavascriptCssJavascript Problem Overview
Is it possible to check if an element's CSS display == block
or none
using JavaScript?
Javascript Solutions
Solution 1 - 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.
Solution 2 - Javascript
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.
Solution 3 - Javascript
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
}
Solution 4 - Javascript
This answer is not exactly what you want, but it might be useful in some cases. If you know the element has some dimensions when displayed, you can also use this:
var hasDisplayNone = (element.offsetHeight === 0 && element.offsetWidth === 0);
EDIT: Why this might be better than direct check of CSS display
property? Because you do not need to check all parent elements. If some parent element has display: none
, its children are hidden too but still has element.style.display !== 'none'
.
Solution 5 - Javascript
yes.
var displayValue = document.getElementById('yourid').style.display;
Solution 6 - Javascript
Basic JavaScript:
if (document.getElementById("elementId").style.display == 'block') {
alert('this Element is block');
}
Solution 7 - Javascript
To find out if it's visible with plain JavaScript, check whether the display property is 'none' (don't check for 'block', it could also be blank or 'inline' and still be visible):
var isVisible = (elt.style.display != "none");
If you are using jQuery, you can use this instead:
var isVisible = $elt.is(":visible");
Solution 8 - Javascript
You can check it with for example jQuery:
$("#elementID").css('display');
It will return string with information about display property of this element.
Solution 9 - Javascript
With pure javascript you can check the style.display
property. With jQuery you can use $('#id').css('display')