Check if an element is Visible/Hidden with jQuery

element is Visible

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.

Based on United States, Jacob Frazier is a skilled JavaScript developer with over 8 years of experience. He is passionate about change and trying new things, both professionally and personally. He loves startups and is extremely proactive.

You may like:  jQuery Data Method

Leave a Reply

Your email address will not be published. Required fields are marked *