要素の表示/非表示をトグルするベストプラクティス

JavaScript CSS DOM

を読んで、display = "block" はアカンやろ、と思ったので書いておく。

<div id="foo">
  <p>FOO</p>
</div>

div#foo を JavaScript から表示/非表示をするには。

ダメパターン

function show (elm) {
  elm.style.display = "block";
}
function hide (elm) {
  elm.style.display = "none";
}

これはダメなパターン。何故なら、show 関数が対象とする要素が、display: block で合っているか保証がないから。
場合によっては、inline,inline-block,table,table-row,table-row等々にする必要があるかもしれない。

visiblityを使う

function show (elm) {
  elm.style.visiblity = "visible";
}
function hide (elm) {
  elm.style.visibility = "collapse";
}

個人的には好きなパターン。ただし、全てのブラウザで使えるか怪しい。
また、hide なのに hidden じゃなくて collapse？となるのが気になる。まぁ関数名を collapse にすればいいだけなんだけどさ...。

display="none" と display=""

function show (elm) {
  elm.style.display = "";
}
function hide (elm) {
  elm.style.display = "none";
}

表示にする時は、display = "" を使うと、インラインスタイルが削除されることになるため、本来のdisplay値に戻る。削除という意味ではstyle.removeProperty("display")*1を使うのが正しいかもしれないけど、こちらだと対応ブラウザが気になる。
コードとして表示するという明確な意味が伝わってこない辺りが気になるところ。

class の付け替え

.hidden {
  display: none;
}

function show (elm) {
  elm.classList.remove("hidden");
}
function hide (elm) {
  elm.classList.add("hidden");
}

visibility と同じく、IE8 あたりの対応が気になる。

まとめ

クロスブラウザを考えるなら「display="none" と display=""」が一番ではないかなと思う。

*1:http://dev.w3.org/csswg/cssom/#dom-cssstyledeclaration-removeproperty 未だにEditor's Draft...