要素が非表示であるかどうかを確認する方法

JavaScriptを使用して要素が非表示であるかどうかを確認する方法を学びます。

非表示の要素を確認します

例

もし <div> 元素が非表示にされていた場合、以下の操作を実行します：

function myFunction() {
  var x = document.getElementById("myDIV");
  if (window.getComputedStyle(x).display === "none") {
    // 某些操作を実行..
  }
}

自分で試してみてください

注意：使用する際には、 display:none 非表示状態の要素（例えば上記の例のように）では、その要素はどのスペースも占めません。

ある要素が非表示にされているかどうかを確認する方法 visibility:hidden 非表示状態にします。以下の例を参照してください。この「非表示」状態の要素はスペースを占めます。

例

function myFunction() {
  var x = document.getElementById("myDIV");
  if (window.getComputedStyle(x).visibility === "hidden") {
    // 某些操作を実行..
  }
}

自分で試してみてください

関連ページ

チュートリアル：CSS 表示

チュートリアル：要素の非表示/表示切り替え方法