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

How to check if an element is hidden in jquery

青灯夜游
Release: 2022-02-28 16:05:59
Original
3348 people have browsed it

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")".

How to check if an element is hidden in jquery

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>
Copy after login

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元素隐藏了");
		}
	});
});
Copy after login

The running result is the same as the picture above.

Description:

Visibility filter selector:

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

  • ##$("div:visible") Select all visible elements
  • is() method is used to check whether the selected element is Match selector.

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

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
Latest Issues
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template