ホームページ > 記事 > ウェブフロントエンド > jqueryで要素が隠されているかどうかを検出する方法

jqueryで要素が隠されているかどうかを検出する方法

青灯夜游オリジナル: 2022-12-16 16:09:444067ブラウズ

3 メソッド: 1. css() を使用して、要素の表示属性の値が none かどうかを検出します。そうであれば、非表示になります。構文は、「element object.css('display'」です) )=='none'"; 2. is() メソッドと ":hidden" セレクターを使用します。戻り値が true の場合、要素は非表示になります。構文は "element object.is(":hidden") です。 "; 3. is() メソッドと ":visible" "セレクター、構文 "!(Element object.is(":visible"))" を使用します。

このチュートリアルの動作環境: Windows7 システム、jquery3.6.1 バージョン、Dell G3 コンピューター。

jquery で要素が非表示かどうかを検出するいくつかのメソッド

方法 1: css() を使用して値が非表示かどうかを検出します表示属性はなしです。

css() は、選択した要素の 1 つ以上のスタイル属性を返すことができます。

css() を使用して表示属性の値を取得し、その値が none かどうかを判断して要素が非表示かどうかを検出するだけです。 none の場合、要素は非表示になります。

# が none でない場合、要素は非表示になりません。

<!DOCTYPE html>
<html>
	<head>
		<script src="js/jquery-3.6.1.min.js"></script>
		<script type="text/javascript">
			$(document).ready(function() {
				$("button").click(function() {
					if ($("#hide").css(&#39;display&#39;)==&#39;none&#39;) {
						console.log("#hide元素隐藏了");

					} else {
						console.log("#hide元素没隐藏，是可见的");
					}
					if ($("#show").css(&#39;display&#39;)==&#39;none&#39;) {
						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>

##方法 2: is() メソッドと「:hidden」セレクター検出を使用する

jqueryで要素が隠されているかどうかを検出する方法

is() メソッドを使用して、選択された要素がセレクターと一致するかどうかを確認します。

:hidden セレクターは非表示の要素を選択します。次の状況の要素は非表示要素です:

display:none に設定します

type="hidden" のフォーム要素
非表示の親要素 (子要素も非表示になります)
検出構文:
```
元素对象.is(":hidden")
```

戻り値の場合値が true の場合、要素は非表示になります。戻り値が false の場合、要素は非表示ではありません。

<!DOCTYPE html>
<html>
	<head>
		<script src="js/jquery-3.6.1.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>

方法 3: is() メソッドと「:visible」セレクター検出を使用する

jqueryで要素が隠されているかどうかを検出する方法 is() メソッドは、選択された要素がセレクターと一致するかどうかを確認するために使用されます。

: 表示セレクターは、現在表示されている各要素を選択します。次以外の要素は表示要素です。

は、display:none

```
!(元素对象.is(":visible"))
```

<!DOCTYPE html>
<html>
	<head>
		<script src="js/jquery-3.6.1.min.js"></script>
		<script type="text/javascript">
			$(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元素没隐藏，是可见的");
					}
				});
			});
		</script>
	</head>

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

[推奨学習:

jQuery ビデオチュートリアル

、

Web フロント-ビデオ終了 jqueryで要素が隠されているかどうかを検出する方法 ]

以上がjqueryで要素が隠されているかどうかを検出する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

jquery css 对象选择器 display

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

前の記事：jQueryにフォーカスイベントはありますか？次の記事：jQueryにフォーカスイベントはありますか？

続きを見る