使用JavaScript查找特定的div是否不可見（visible = false）

Question

使用以下代碼，我正在發現div是否不可見。

if(document.getelementbyid("header").style.visible){
  alert("Yes");
}
else{
  alert("No");
}

檢查visible屬性，因為根據條件定義了header.visible = false后面的代碼。 但是它總是返回“否”。 請告訴正確的方法。

Answer 1

沒有可見屬性，但是可見性，它可以具有以下值：

visible
hidden
collapse

請參閱MDN文章 。

Answer 2

您可以使用顯示和可見性來檢查元素是否可見

    var elem = document.getelementbyid("header");
    if(elem .style.visibility == "hidden" || elem.style.display == 'none'){
        alert("No");  // element is visible
    }
    else{
         alert("Yes");
    }

Answer 3

請記住，javascript中沒有style.visible 。 根據您如何隱藏div，您需要檢查

if(document.getelementbyid("header").style.visibility != "hidden") {
   //visible
} else {
   //not visible
}

要么

if(document.getelementbyid("header").style.display != "none") {
   //visible
} else {
   //not visible
}

同時，以上代碼將僅檢查確切元素是否不顯示或隱藏可見性。 但是同時，當父元素不可見時，它將返回可見。 因此，您可以執行以下操作：

var element = document.getelementbyid("header");
if(element.offsetWidth > 0 || element.offsetHeight > 0) {
   //visible
} else {
   //not visible
}

如果不可見，瀏覽器將始終返回元素的寬度和高度0

Answer 4

如果您使用的是jQuery：

var isVisible = $("#header").is(":visible");

Answer 5

CSS屬性是visibility 。 請記住，如果屬性是使用CSS而不是通過style屬性設置的，則該屬性可能不包含您期望的值。