Home > Article > Web Front-end > How to check if an element is hidden in jquery

How to check if an element is hidden in jquery

青灯夜游Original: 2022-02-28 16:05:593306browse

Jquery method to check whether an element is hidden: 1. Use the is() method and the ":hidden" selector, the syntax is "element object.is(":hidden")"; 2. Use the is() method and ":visible" selector, syntax "element object.is(":visible")".

The operating environment of this tutorial: windows7 system, jquery1.10.2 version, Dell G3 computer.

jquery checks whether the element is hidden

1. Use the is() method and the ":hidden" selector

<!DOCTYPE html>
<html>
	<head>
		<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
		<script type="text/javascript">
			$(document).ready(function() {
				$("button").click(function() {
					if ($("#hide").is(":hidden")) {
						console.log("#hide元素隐藏了");

					} else {
						console.log("#hide元素没隐藏，是可见的");
					}
					if ($("#show").is(":hidden")) {
						console.log("#show元素隐藏了");

					} else {
						console.log("#show元素没隐藏，是可见的");
					}
				});
			});
		</script>
	</head>

	<body>
		<div id="hide" style="display:none;">
			#hide元素-我是隐藏的内容，你看不到我。
		</div>
		<div id="show" style="display:block;">
			#show元素-我是显示的内容，你看的到我。
		</div><br>
		<button>检查元素是否隐藏</button>
	</body>
</html>

How to check if an element is hidden in jquery

2. Use the is() method and the ":visible" selector

$(document).ready(function() {
	$("button").click(function() {
		if ($("#hide").is(":visible")) {
			console.log("#hide元素没隐藏，是可见的");
			
		} else {
			console.log("#hide元素隐藏了");
		}
		if ($("#show").is(":visible")) {
			console.log("#show元素没隐藏，是可见的");
			
		} else {
			console.log("#show元素隐藏了");
		}
	});
});

The running result is the same as the picture above.

Description:

Visibility filter selector:

##$("div:hidden") Visibility filter selector: Elements

[Recommended learning:

jQuery video tutorial

, web front-end development video]

The above is the detailed content of How to check if an element is hidden in jquery. For more information, please follow other related articles on the PHP Chinese website!

Statement：

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

Previous article：What does > in jquery mean?Next article：What does > in jquery mean?

See more

How to check if an element is hidden in jquery

Related articles