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{
}