JS_javascriptスキルにおけるstyle.displayとstyle.visibilityの違いの説明例

JS では、style.display 属性または style.visibility 属性を設定することで要素を表示するかどうかを制御できます。style.display=block および style.visibility=visible の場合、要素は style.display=none および style のときに表示されます。 Visibility= 非表示の場合、要素は非表示になります。これらの最大の違いは、style.display=none で非表示にした場合、要素は元の位置を占有せず、ドキュメント フローから分離され、後続の要素がその位置を埋めることです。 style.visibility=hidden によって非表示にすると、要素は元の位置を占めますが、非表示になります。

次の例は、この違いを示しています。この例では、style.display=none を使用して divContent1 と divContent2 が非表示になります。このとき、次の div は上に移動し、すでに非表示になっている div を占有します。 divContent3 と divContent4 は style.visibility=hidden を使用して非表示にしますが、非表示になった後も元のスペースを占有します。

<title>テスト</title> <meta http-equiv="content-type" content="text/html; charset=gb2312"> <style> .titlediv{background-color: #505050;color:white;font-weight:bold;padding:10px;cursor:pointer } .contentdiv{border:3px solid #505050;height:100px;padding:10px; } </style> <div class="titlediv" onclick="toggle('divContetn1')"> </div>