display または visibility を通じて HTML 要素を表示または非表示にする

場合によっては、特定の条件に基づいて Web ページ内の HTML 要素を表示するか非表示にするかを制御する必要があります。これは、display または visibility を通じて実現できます。次の例は、表示と可視性の違いを示しています。簡単なサンプルコードは次のとおりです。

コードをコピー

コードは次のとおりです。

<html>
<ヘッド>
<title>HTML 要素の表示と非表示のコントロール</title>
<script type="text/javascript">
関数 showAndHidden1(){
var div1 = document.getElementById("div1");
div2 要素を取得します。
if(div1.style.display=='block') div1.style.display='none';
それ以外の場合は、div1.style.display='block';
div2.style.display=='block' の場合、 div2.style.display='none';
それ以外の場合は、div2.style.display='block';
}
関数 showAndHidden2(){
var div3 = document.getElementById("div3");
var div4 = document.getElementById("div4");
div3.style.visibility=='表示'の場合、div3.style.visibility='非表示';
それ以外の場合は、div3.style.visibility='visible';
div4.style.visibility=='表示'の場合、div4.style.visibility='非表示';
それ以外の場合は、div4.style.visibility='visible';
}
</スクリプト>
</head>
<本文>
<div>display: 要素の位置が占有されていません</div>
<div id="div1" style="display:block;">DIV 1</div>
<div id="div2" style="display:none;">DIV 2</div>
<input type="button" onclick="showAndHidden1();" value="DIV スイッチ" />
<時間>
<div>可視性: 要素の位置はまだ占有されています</div>
<div id="div3" style="visibility:visible;">DIV 3</div>
<div id="div4" style="visibility:hidden;">DIV 4</div>
<input type="button" onclick="showAndHidden2();" value="DIV スイッチ" />
</本文>
</html>

<<: Vueは要素ツリーコントロールを通じてツリーテーブルを実装します

>>: HTML と CSS の命名規則の概要