jqueryでスペースを占有せずにdivを非表示にする方法-jsチュートリアル-php.cn

jqueryでスペースを占有せずにdivを非表示にする方法

青灯夜游

リリース： 2021-11-15 18:18:28

オリジナル

3415 人が閲覧しました

スペースを占有せずに div を非表示にする Jquery メソッド: 1. "$("div").css('display','none');" ステートメントを使用します; 2. "$("div" ) を使用します.hide();" ステートメント; 3. "$("div").toggle();" ステートメントを使用します。

jqueryでスペースを占有せずにdivを非表示にする方法

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

jquery はスペースを占有せずに div を非表示にします

スペースを占有せずに div を非表示にしたい場合は、 を設定することを考えます。 div の表示: none スタイル。

display:noneスペースを占有せずに要素を非表示にできるため、この属性を動的に変更すると再配置 (ページレイアウトの変更) が発生します。これは、要素をページに配置するものと理解できます。 . 削除と同じで、子孫には継承されませんが、その子孫は表示されず、結局一緒に隠れてしまいます。

それでは、jquery を使用して display:none スタイルを div に設定するにはどうすればよいでしょうか?以下にそれを紹介します。

方法 1: css() を使用して、display:none スタイルを追加します。

$("div").css(&#39;display&#39;,&#39;none&#39;);

ログイン後にコピー

Example:

<!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() {
					$("div").css(&#39;display&#39;, &#39;none&#39;);
				});
			});
		</script>
	</head>
	<body>

		<div style="border: 1px solid red;">hello</div>
		<br>
		<button>点击按钮，让div不占位隐藏</button>

	</body>
</html>

ログイン後にコピー

jqueryでスペースを占有せずにdivを非表示にする方法