ホームページ >ウェブフロントエンド >フロントエンドQ&A >jqueryの位置でdiv要素を非表示にする方法

jqueryの位置でdiv要素を非表示にする方法

青灯夜游オリジナル: 2022-12-16 18:15:282556ブラウズ

jquery では、css() メソッドを使用して、div 要素の可視性または不透明度スタイルを設定して、その位置を占め、div 要素を非表示にすることができます。実装手順: 1. jquery セレクターを使用して div 要素オブジェクトを取得します (構文 "$("selector")"; 2. css() を使用して div 要素を非表示にします (構文 "element object.css("visibility") ,"hidden") ;" または "ElementObject.css('opacity',0);"。

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

jquery では、css() メソッドを使用して、div 要素の可視性または不透明度スタイルを設定して、その位置を占め、div 要素を非表示にすることができます。

方法 1. css() を使用して要素に visibility: hidden; スタイルを追加し、非表示の

visibility 属性を設定して指定します要素が表示されるかどうか。

visibility: hidden; スタイルは、対応する要素を非表示にしますが、ドキュメントフロー内の元のスペースを保持し、リソースが読み込まれます。

例:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<script src="js/jquery-3.6.1.min.js"></script>
		<script>
			$(document).ready(function() {
				$("button").click(function() {
					$(".visibility").css("visibility","hidden");
				});
			});
		</script>
	</head>
	<body>
		<div>正常显示的div元素</div>
		<div class="visibility">需要隐藏的div元素</div>
		<div>正常显示的div元</div>
		<br>
		<button>占位置隐藏元素</button>

	</body>
</html>

jqueryの位置でdiv要素を非表示にする方法

方法 2: css() を使用して opacity:0; スタイルを追加します。、要素の透明度を 0

opacity 属性は、要素の透明度を設定することを意味します。要素の境界ボックスを変更するようには設計されていません。

これは、不透明度を 0 に設定すると、要素が視覚的に非表示になるだけであることを意味します。要素自体は引き続き独自の位置を占め、Web ページのレイアウトに貢献します。これは、上記の visibility: hidden と似ています。

例:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<script src="js/jquery-3.6.1.min.js"></script>
		<script>
			$(document).ready(function() {
				$("button").click(function() {
					$(".opacity").css(&#39;opacity&#39;,0);
				});
			});
		</script>
	</head>
	<body>
		<div>正常显示的div元素</div>
		<div class="opacity">需要隐藏的div元素</div>
		<div>正常显示的div元</div>
		<br>
		<button>占位置隐藏元素</button>

	</body>
</html>

jqueryの位置でdiv要素を非表示にする方法

拡張知識: jquery の要素を非表示にする組み込みメソッド

jquery が構築されています-in 要素を非表示にする複数の方法。

show() および Hide() メソッド

show() は、非表示の

$(".btn2").click(function(){
  $("p").show();
});

hide() は、表示されている

要素を非表示にできます:

$(".btn1").click(function(){
  $("p").hide();
});

この関数は、show

toggle() メソッドとともによく使用されます

#toggle() メソッドは、要素の表示状態を切り替えます。

選択した要素が表示されている場合は、これらの要素を非表示にします。選択した要素が非表示になっている場合は、これらの要素を表示します。

<html>
<head>
<script src="js/jquery-1.10.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $(".btn1").click(function(){
  $("p").toggle(1000);
  });
});
</script>
</head>
<body>
<p>This is a paragraph.</p>
<button class="btn1">Toggle</button>
</body>
</html>

slideDown() メソッド

非表示の

要素をスライド形式で表示します:

$(".btn2").click(function(){
  $("p").slideDown();
});

jqueryの位置でdiv要素を非表示にする方法

関連記事