Check if an element is Visible/Hidden with jQuery

In jQuery, the :visible selector selects each elements which is currently visible or check whether element is visible or not.

Basically, elements are considered visible when they consume space in a document. So, visible elements have a width or height greater than zero.

Elements with “visibility: hidden” or “opacity: 0” are considered as visible, because they consume space in the document layout.

According to the jQuery documentation, the :visible selector means:

• They have a CSS none display value.
• They are form elements with type=”hidden”.
• Width and height are explicitly set to 0.
• Ancestor element is hidden, so the element is not shown on the page.
• Elements with visibility: hidden or opacity: 0 are considered to be visible, since they still consume space in the layout.

Read Also: jQuery :visible – Check for hidden elements in jQuery

Syntax of element is Visible:

$(":visible")

For example, you have the following HTML:

<p id="myDiv1" style="display:none;">Div 1</p>
<p id="myDiv2" style="visiblility:hidden;">Div 2</p>

So, you can check with:

console.log($('#myDiv1').is(':visible')); // Returns false

console.log($('#myDiv2').is(':visible'));  // Returns true

or,

if($('#testElement').is(':visible')) {
// Code
}

Alternatively, you can select visible element by:

$( "div:visible" ).css( "background", "red" );

:visible has had a reputation for being quite a slow selector as it has to traverse up the DOM tree inspecting a bunch of elements.