親要素がdisplay:noneかどうかを、子要素で確認する方法

javascript 
<div style="display:none;font-size:14px">
  <p><span id="child">子要素(正確には子孫要素)</span></p>
</div>

こんな感じのhtmlがあったときに、display:none が指定されてるdivを見ずに、
id="child"の要素から、自身が表示されているのかどうかを判別したい。


普通にstyleを見ても当然ながらわかりません。

>>> alert(document.getElementById('child').style.display)
""  // 空文字

>>> alert(document.getElementById('child').style.fontSize)
""


getComputedStyleを使ってみる

>>> var child_style = getComputedStyle(document.getElementById('child'), '');
>>> // IEだと var child_style = document.getElementById('child').currentStyle;
>>> alert(child_style.display)
"inline"

>>> alert(child_style.fontSize)
"14px"

font-sizeプロパティは正しく取得できていますが、
displayプロパティは期待する値ではありません。


これは、displayプロパティが子要素に継承されない属性であるためです。
（「display 継承 css」とかでぐぐると色々出てきます）


しかたないので、要素の高さで確認します。(別に、widthでもいい気がしますが。)

>>> alert(document.getElementById('child').offsetHeight)
"0"

// divのdisplay:noneを削除したものに対しては、
>>> alert(document.getElementById('child').offsetHeight)
"15"

となり、返り値が「0」かどうかで自身が表示されているかどうかが判別できます。


つまり、こういうことです。

if (document.getElementById('child').offsetHeight) {
    alert('表示されている');
} else {
    alert('表示されていない');
}

以下の環境で動作を確認しました。

      • -

本題とは関係ないですが、画面外にある要素についてはどうなのかも、
気になったので確認してみました。

<div id="disp_out" style="position:absolute;left:-999">画面外の要素</div>

画面上では見えない要素ですが。。。

>>> alert(document.getElementById('disp_out').offsetHeight)
"19"

残念、取れちゃいました。

まぁ、こんな判定することはまずないと思うので、いいのですが。