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 を使用して非表示にしますが、非表示になった後も元のスペースを占有します。