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 falseconsole.log($('#myDiv2').is(':visible')); // Returns trueor,
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.