用 JavaScript 检查元素 CSS 显示

小开

最佳答案

正如 sdlehssirhc 下面所说，如果元素的 display被继承或由 CSS 规则指定，那么您将需要得到它的计算风格:

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

元素有一个 style属性，它会告诉你你想要什么，如果样式是内联声明的或者使用 JavaScript:

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

会给你一个字符串值。

小开

是的。

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

小开

对于 jQuery，你的意思是像这样吗？

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

你可以这样检查:

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

小开

如果样式是内联声明的，或者使用 JavaScript 声明的，那么您只需要访问 style对象:

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

否则，您将不得不获得计算样式，并且存在浏览器不一致性。IE 使用一个简单的 currentStyle对象，但其他所有人都使用一个方法:

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

Firefox 3及以下版本需要 null。

小开

你可以用 jQuery 来检查它:

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

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

小开

使用纯 javascript 可以检查 style.display属性，使用 jQuery 可以使用 $('#id').css('display')

小开

为了确定它是否可以在普通 JavaScript 中看到，检查 display 属性是否为“ none”(不要检查“ block”，它也可以是空白或“ inline”，并且仍然可见) :

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

如果您使用的是 jQuery，那么您可以使用以下代码:

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

小开

基本 JavaScript:

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

小开

这个答案并不完全是您想要的，但是在某些情况下可能会有用。如果您知道元素在显示时具有某些维度，还可以使用以下方法:

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

编辑: 为什么这可能比直接检查 CSS display属性更好？因为不需要检查所有父元素。如果某个父元素具有 display: none，那么它的子元素也是隐藏的，但仍然具有 element.style.display !== 'none'。

小开

我刚刚找到了函数 element.checkVisibility()，它在设置 display: none时返回 false。

老实说，我找不到任何有关它的文档，所以我不知道它是否是特定于 Chrome 的。