JS: ‘element.style’ and ‘window.getComputedStyle(element)’

結論:以下コードを使用した方が確実
window.getComputedStyle(element).display

element.style.display !== “none”

HTMLタグに直接 style=”display: none” が設定されているかどうかを判断するため、CSSファイルや style タグで設定されたスタイルはこの方法ではチェックできない。
要素が style 属性で display: none を持っていなければ、CSSによって非表示に設定されていても、この条件は true を返す。

window.getComputedStyle(element).display !== “none”

‘getComputedStyle’は、以下を含め、すべてのソースからのスタイル情報を反映した最終的なスタイルプロパティを返すため、要素が実際にどのように表示されるか判断できる。

  • インラインスタイル
  • 外部CSSファイル
  • style タグ
  • ブラウザのデフォルトスタイル

TagTimes

Simple time tracking tool
Developed by Namu Works