Home > Article > Web Front-end > How to determine whether an element is displayed in jquery
How to determine whether an element is displayed in jquery
- 青灯夜游Original
- 2022-04-28 17:00:157599browse
In jquery, you can use the ":visible" selector and is() method to determine whether an element is displayed. The syntax is "element object.is(':visible')". You can check whether the specified element is displayed. Matches the ":visible" selector, that is, whether it is a visible element; if the element is displayed, it returns true.
The operating environment of this tutorial: windows7 system, jquery1.10.2 version, Dell G3 computer.
In jquery, you can use the ":visible" selector and is() method to determine whether an element is displayed
is() method is used to view the selected Whether the element matches the selector.
-
: The visible selector selects each element that is currently visible.
Elements other than the following situations are visible elements:
is set to display:none
with Form elements with type="hidden"
width and height set to 0
hidden parent elements (this will also hide child elements )
Syntax to determine whether an element is displayed:
元素对象.is(':visible')
means to check whether the specified element matches ":visible "Selector, that is, whether it is a visible element
Example:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="js/jquery-1.10.2.min.js"></script>
<script>
$(function () {
$("button").click(function () {
var node=$('span');
if(node.is(':visible')){
alert("显示元素");
}else{
alert("隐藏元素，将它显示出来");
node.show();
}
})
})
</script>
</head>
<body>
<div>这是一段可见的div内容。</div>
<span hidden="hidden">这是一个被隐藏的内容，现在显示出来了。</span>
<p>这是一段可见的内容。</p>
<button>判断span元素是否显示</button>
</body>
</html>
[Recommended learning: jQuery video tutorial, web front-end video】
The above is the detailed content of How to determine whether an element is displayed in jquery. For more information, please follow other related articles on the PHP Chinese website!