檢查元件 CSS 顯示與 JavaScript

Question

是否可以使用 JavaScript 檢查元素的 CSS 是否display == block或none ？

Answer 1

正如下面 sdleihssirhc 所說，如果元素的display被繼承或由 CSS 規則指定，則需要獲取其計算樣式：

return window.getComputedStyle(element, null).display;

元素有一個style屬性，它會告訴你你想要什么，如果樣式是內聯聲明的或使用 JavaScript 聲明的：

console.log(document.getElementById('someIDThatExists').style.display);

會給你一個字符串值。

Answer 2

如果樣式是內聯聲明的或使用 JavaScript 聲明的，您可以直接獲取style對象：

return element.style.display === 'block';

否則，您將不得不獲取計算樣式，並且會出現瀏覽器不一致的情況。 IE 使用一個簡單的currentStyle對象，但其他人都使用一個方法：

return element.currentStyle ? element.currentStyle.display :
                              getComputedStyle(element, null).display;

Firefox 3 及以下版本需要null 。

Answer 3

對於jQuery，你的意思是這樣嗎？

$('#object').css('display');

你可以這樣檢查：

if($('#object').css('display') === 'block')
{
    //do something
}
else
{
    //something else
}

Answer 4

這個答案並不完全是您想要的，但在某些情況下可能有用。 如果你知道元素在顯示時有一些尺寸，你也可以使用這個：

var hasDisplayNone = (element.offsetHeight === 0 && element.offsetWidth === 0);

編輯：為什么這可能比直接檢查 CSS display屬性更好？ 因為您不需要檢查所有父元素。 如果某個父元素有display: none ，它的子元素也被隱藏了，但仍然有element.style.display !== 'none' 。

Answer 5

是的。

var displayValue = document.getElementById('yourid').style.display;

Answer 6

基本 JavaScript：

if (document.getElementById("elementId").style.display == 'block') { 
  alert('this Element is block'); 
}

Answer 7

要確定它是否在純 JavaScript 中可見，請檢查 display 屬性是否為 'none'（不要檢查 'block'，它也可能是空白或 'inline' 並且仍然可見）：

var isVisible = (elt.style.display != "none");

如果您使用的是 jQuery，則可以使用以下代碼：

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

Answer 8

使用純 javascript，您可以檢查style.display屬性。 使用 jQuery，您可以使用$('#id').css('display')

Answer 9

我剛剛發現 function element.checkVisibility()在display: none設置時返回false 。

老實說，我找不到任何文檔，所以我不知道它是否特定於 Chrome。

Answer 10

您可以使用例如 jQuery 來檢查它：

$("#elementID").css('display');

它將返回字符串，其中包含有關此元素的顯示屬性的信息。