JavaScriptの”display“プロパティは、要素の表示方法を制御するために使用されます。以下の値に設定することができます。
- “block“: 要素はブロックレベル要素として表示されます。つまり、単独で一行を占め、高さ、幅、パディング、マージンを設定することができます
- “inline“: 要素はインライン要素として表示されます。つまり、他のインライン要素と同じ行に並べられ、高さ、幅、パディング、マージンを設定することができません。
- “none“: 要素は非表示になりますが、まだページ上の場所を占めます。高さ、幅、パディング、マージンは機能しません。
- “inline-block“: 要素はインラインブロック要素として表示されます。つまり、他のインライン要素と同じ行に並べられ、高さ、幅、パディング、マージンを設定することができます。
要素の”display”プロパティを変更するには、JavaScriptの”style”オブジェクトを使用できます。
例えば：
// 要素を取得する
var element = document.getElementById("myElement");
// "display"プロパティを"none"に設定して、要素を非表示にする
element.style.display = "none";
// "display"プロパティを"block"に設定して、要素をブロックレベル要素として表示する
element.style.display = "block";
上記の例では、最初に要素の参照を取得し、その”display”プロパティを”none”に設定して非表示にしました。そして、その”display”プロパティを”block”に設定して、ブロックレベル要素として表示しました。
コメント