How to determine whether an element is displayed in jquery

青灯夜游
Release: 2022-04-28 17:35:38
Original
7712 people have browsed it

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.

How to determine whether an element is displayed in jquery

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')
Copy after login
  • 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=$(&#39;span&#39;);
               if(node.is(&#39;:visible&#39;)){
				   alert("显示元素");
			   }else{
				   alert("隐藏元素,将它显示出来");
				   node.show();
			   }
            })
        })
    </script>
	</head>
	<body>
		<div>这是一段可见的div内容。</div>
		<span hidden="hidden">这是一个被隐藏的内容,现在显示出来了。</span>
		<p>这是一段可见的内容。</p>
		<button>判断span元素是否显示</button>
	</body>
</html>
Copy after login

How to determine whether an element is displayed in jquery

[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!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template