How do I check if an element is really visible with JavaScript?

javascript dom visibility
Macha picture Macha · Apr 1, 2009 · Viewed 132.5k times · Source

In JavaScript, how would you check if an element is actually visible?

I don't just mean checking the visibility and display attributes. I mean, checking that the element is not

  • visibility: hidden or display: none
  • underneath another element
  • scrolled off the edge of the screen

For technical reasons I can't include any scripts. I can however use Prototype as it is on the page already.

Answer

Christophe Eblé picture Christophe Eblé · May 25, 2009

For the point 2.

I see that no one has suggested to use document.elementFromPoint(x,y), to me it is the fastest way to test if an element is nested or hidden by another. You can pass the offsets of the targetted element to the function.

Here's PPK test page on elementFromPoint.

Related questions

How do I check if an element is hidden in jQuery?

Is it possible to toggle the visibility of an element, using the functions .hide(), .show() or .toggle()? How would you test if an element is visible or hidden?

Read More
call javascript function from anchor html tag

I need to display message when the user clicks link How can I implement something where once the user click the hyper link on Page1, a "processing..." message and then as soon as Page2 is ready it forwards to Page2? …

Read More
How can I change an element's class with JavaScript?

How can I change the class of an HTML element in response to an onclick or any other events using JavaScript?

Read More