CODEWITHSUNDEEP
javascriptcss
Haytham
Haytham

Reputation: 215

How to check element's visibility via javascript?

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,

Upvotes: 18

Views: 50340

Answers (5)

Josh Stodola
Josh Stodola

Reputation: 82513

This is the quickest and easiest way to determine if an element is visible.

function is_visible(e) {return e.offsetWidth > 0 || e.offsetHeight > 0;}

Upvotes: 6

Pancho
Pancho

Reputation: 2193

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:

  1. where an element is the same colour as the surrounding colour
  2. 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:

  1. It can of course be used for many other style related purposes besides testing visibility
  2. 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.

Upvotes: 1

Andrew Magill
Andrew Magill

Reputation: 2509

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")

Upvotes: 3

Crescent Fresh
Crescent Fresh

Reputation: 117018

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.

Upvotes: 32

Mark
Mark

Reputation: 261

Is this what you are trying to do?

function SomeClass()
{
  if (document.getElementById("MY_DIV_ID").style.display == "none")
  {

  }
}

Upvotes: -1

Related Questions