Jquery several ways to determine whether an element is hidden

  • 2020-03-30 02:51:35
  • OfStack

First: use CSS properties


var display =$('#id').css('display');
if(display == 'none'){
   alert(" You found me, I'm hidden! ");
}

Second: use jquery built-in selectors

So let's say we have this TAB on our page,

<div id="test">
<p> Just for testing purposes </p>
</div>

So, we can use the following statement to determine whether the tag with id "test" is hidden:
if($("#test").is(":hidden")){...} // The premise is that the jQuery The library of 

In this way, we can easily determine whether an element is hidden or not and set the animation according to its state, such as:

if($("#test").is(":hidden")){
       $("#test").show();    //If the element is hidden, it appears
}else{
      $("#test").hide();     //If the element is visible, hide it
}

JQuery determines whether an element is displayed or hidden


var node=$('#id');

The first way to write it

if(node.is(':hidden')){  //Show the node element if the node is hidden, otherwise hide   node.show();  }else{   node.hide(); }

The second way

if(!node.is(':visible')){  //Show the node element if the node is hidden, otherwise hide   node.show();  }else{   node.hide(); } if(node.is(':visible')){  //Hide the node element if it is displayed, otherwise   node.hide(); }else{   node.show(); }

JQuery determines whether an object is shown or hidden

Js code


// jQuery("#tanchuBg").css("display") 
// jQuery("#tanchuBg").is(":visible") 
// jQuery("#tanchuBg").is(":hidden") 

Js code


$(element).is(":visible") // Checks for display:[none|block], ignores visible:[true|false] 

Js code


$('element:hidden') 
$('element:visible') 

Js code


$(".item").each(function() 

    if ($(this).css("visibility") == "hidden") 
    { 
        // handle non visible state 
    } 
    else 
    { 
        // handle visible state 
    } 
}) 

Js code


ar isVisible = $('#myDiv').is(':visible'); 
var isHidden = $('#myDiv').is(':hidden'); 

Js code


if( $(this).css("display") == 'none' ){ 
 
     

else{ 
 
     


Related articles: