How to determine whether a specific DOM element is visible or not?

Question

Using jQuery, what is the easiest way to determine whether a particular element is visible? I don’t mean visible within the current viewport, but on the page.

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

Answer 1

Use :visible selector with is method.

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

Answer 2

You can use is() method.

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

Answer 3

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

Also, it's worth noting this section of the jQuery 1.3.2 changelog:

In jQuery 1.3.2 an element is visible if its browser-reported offsetWidth or offsetHeight is greater than 0. It means that if your element's CSS display is "none", or any of its parent/ancestor element's display is "none", or if the element's width is 0 and the element's height is 0 then an element will be reported as hidden.