How to check element's visibility via javascript?
Question
I'm interested in a way to check whether an element has display:none style explicility (ie style="display:none"), has a class that has (or inherits) this style, or one of its parents is hidden (and my element inherits this)
Case1:
<body><div><span style="display:none;">Some hidden text</span></div>
or
<body><div style="display:none;"><span>Some hidden text</span></div>
Case2:
SomeClass { display:none; }
<body><div class="SomeClass"><span>Some hidden text</span></div>
Thanks,
5 answers
solution1
25 ACCPTED 2009-08-27 19:35:48
You are looking for one solution to two different scenarios.
The first scenario is getting the cascaded/computed style for a css property. See this answer for how to do that.
The second scenario is detecting if any of an element's parents are hidden. This requires traversing and is cumbersome and slow.
You can take the solution outlined here (and employed by jQuery/Sizzle since 1.3.2 ), and just read the dimensions of the element:
var isVisible = element.offsetWidth > 0 || element.offsetHeight > 0;
If it has dimensions then it is visible in the sense that it takes up some rectangular space (however small) in the document. Note that this technique still has some downsides for certain elements in certain browsers, but should work in most cases.
solution2
5 2009-08-27 19:50:02
This is the quickest and easiest way to determine if an element is visible. It is even how jQuery does it.
function isVisible(elem) {
return elem.offsetWidth > 0 || elem.offsetHeight > 0;
}
solution3
1 2009-08-27 19:52:14
Each case will need its own check and you need to know the ID of that element. First, grab the element (just doing this to make the code readable):
var MyElementName = document.getElementById("MyElementName");
Then do your checks:
Case 1:
if (MyElementName.style.display == "none")
Case 2 , looking at the parent, checking FF first:
if ((MyElementName.previousSibling.nodeType == 3 )
&& (MyElementName.parentNode.nextSibling.style.display == "none"))
then for other browsers:
else (MyElementName.parentNode.style.display == "none")
Case 3 , look for an applied css class:
if (MyElementName.className = "SomeClass")
solution4
0 2015-09-06 23:37:02
The above solution caters for this "invisibility" scenario:
display:none;
but it does not cater for this one:
visibility: hidden;
In order to include the test for visibility: hidden; the script can be modified as follows...
First, create a cross browser compliant function to get the desired element's computed style:
computedStyle = function(vElement) {
return window.getComputedStyle?
?window.getComputedStyle(vElement,null)
:vElement.currentStyle; //IE 8 and less
}
Second, create the function to test for visibility
isVisible = function(vElement) {
return !(vElement.offsetWidth == 0 && vElement.offsetHeight == 0)
&& computedStyle(vElement).visibility != "hidden";
}
Finally, simply reference the isVisible function wherever needed as follows:
if (isVisible(myElement)) {
alert('You can see me!');
} else {
alert('I am invisible ha ha!');
}
Just a note that the current isVisible() tests do not cater for a number of "invisibility" scenarios (however the tests could I suppose be enhanced to include these). Here are a few examples:
- where an element is the same colour as the surrounding colour
- where an element is visible but physically behind another element eg. different z-index values
It is also probably worth noting the following regarding the above computedStyle() function:
- It can of course be used for many other style related purposes besides testing visibility
- I have opted to ignore :pseudo style testing due to patchy browser support, however with a minor modification to the function this could be included if desired.
solution5
-1 2009-08-27 19:19:47
Is this what you are trying to do?
function SomeClass()
{
if (document.getElementById("MY_DIV_ID").style.display == "none")
{
}
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.