jqueryを使用して所定の位置にある要素を非表示にする方法-フロントエンドQ&A-php.cn

jqueryを使用して所定の位置にある要素を非表示にする方法

青灯夜游

リリース： 2022-04-20 16:50:43

オリジナル

1919 人が閲覧しました

実装方法: 1. css() を使用して要素に表示スタイルを追加し、非表示に設定します。構文は "element object.css('visibility','hidden');"; 2非表示に設定するには、css() を使用します。要素の透明度は、「ElementObject.css('opacity',0)」という構文で 0 に設定されます。

jqueryを使用して所定の位置にある要素を非表示にする方法

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

位置を占有する非表示要素を実装するには 2 つの方法があります:

Add visibility: hidden;Style
要素に opacity: 0style を要素に追加します

jquery では、css() メソッドを使用して上記の効果を実現できます。

1. css() を使用して要素に表示スタイルを追加し、非表示に設定します

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

	</body>
</html>

ログイン後にコピー

jqueryを使用して所定の位置にある要素を非表示にする方法

説明:

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

この属性は、要素によって生成される要素ボックスを表示するかどうかを指定します。これは、要素がまだ元のスペースを占めていますが、完全に非表示になる可能性があることを意味します。値の折りたたみは、テーブルレイアウトから列または行を削除するためにテーブルで使用されます。

方法 2: css() を使用して要素の透明度を 0

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

	</body>
</html>

ログイン後にコピー

jqueryを使用して所定の位置にある要素を非表示にする方法