检查元件 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');

它将返回字符串，其中包含有关此元素的显示属性的信息。