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

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

青灯夜游
リリース: 2022-12-16 16:09:44
オリジナル
4123 人が閲覧しました

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

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

このチュートリアルの動作環境: 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

    with type="hidden" に設定されます。 form 要素
  • 幅と高さは 0
  • 非表示の親要素 (子要素も非表示になります)
  • 検出構文:
  • !(元素对象.is(":visible"))
    ログイン後にコピー

  • 戻り値が 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(":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 サイトの他の関連記事を参照してください。

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート