displayCSSプロパティってなぁに

概要

displayプロパティがわからないので調べた。

displayプロパティ

  • 要素のレンダリングに使用されるボックスの種類を指定する。
  • noneを使用すると、要素を非表示にできる。その場合、noneを指定した要素の子要素も非表示にできる。
  • 初期値はinline

クリックしたら要素が表示されなくなるサンプル

inner1要素をクリックすると、inner1のdisplayプロパティにnoneがセットされて非表示になります。 で、inner2要素をクリックすると、inner1のdisplayプロパティがinlineに戻るので表示されます。

<div id="inner1" onClick="inner1click()">inner1</div>
<div id="inner2" onClick="inner2click()">inner2</div>
#inner1{
  display: inline;
}

#inner2{
  display: inline;
}
function inner1click(){
  var ele = document.getElementById("inner1");
  ele.style.display = "none";
}

function inner2click(){
  var ele = document.getElementById("inner1");
  ele.style.display = "inline";
}
}

以上。