How to determine if a particular DOM element is visible or not?

Question

Using jQuery, what is the easiest way to determine if a particular element is visible? I do not see visible in the current viewport, but on the page.

Ideally, a function should return false if the element or any of its ancestors has a CSS rule, for example display: none or visibility: hidden . No need to worry about overflow: hidden .

Answer 1

Use the :visible selector using the is method.

 if($('elementSelector').is(':visible')){ //Element is visible } 

Answer 2

You can use the is() method.

 $('#element').is(':visible'); 

Answer 3

$('div:visible'); will return all visible divs .

Also worth noting is this jQuery 1.3.2 changelog section:

In jQuery 1.3.2, an element is visible if its reported offset-width or offsetHeight specified by the browser is greater than 0. This means that if your element in the CSS display is "none" or any of its elements in the parent / ancestor element is "none", or if the width of the element is 0 and the height of the element is 0, then the element will be displayed as hidden.

Answer 4

http://api.jquery.com/visible-selector/

 $('#mydiv').is(":visible");