使用 JavaScript 检查元素 CSS 显示答案

【问题标题】：Check element CSS display with JavaScript使用 JavaScript 检查元素 CSS 显示
【发布时间】：2011-06-19 11:16:16
【问题描述】：

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

【问题讨论】：

【解决方案1】：

正如 sdleihssirhc 下面所说，如果元素的 display 被继承或由 CSS 规则指定，则您需要 get its computed style：

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

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

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

会给你一个字符串值。

【讨论】：

【解决方案2】：

如果样式是内联或使用 JavaScript 声明的，您只需获取 style 对象：

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

否则，您将不得不获取计算后的样式，并且会出现浏览器不一致的情况。 IE 使用简单的currentStyle 对象，但其他人都使用方法：

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

null 在 Firefox 版本 3 及以下版本中是必需的。

【讨论】：

【解决方案3】：

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

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

你可以这样检查：

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

【讨论】：

【解决方案4】：

这个答案并不完全符合您的要求，但在某些情况下可能会有用。如果你知道元素在显示时有一些尺寸，你也可以使用这个：

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

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

【讨论】：

【解决方案5】：

基本 JavaScript：

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

【讨论】：

【解决方案6】：

要确定它是否在纯 JavaScript 中可见，请检查 display 属性是否为“none”（不要检查“block”，它也可以是空白或“inline”并且仍然可见）：

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

如果你使用的是 jQuery，你可以使用这个来代替：

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

【讨论】：

【解决方案7】：

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

【讨论】：

【解决方案8】：

您可以使用例如 jQuery 来检查它：

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

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

【讨论】：

【解决方案9】：

是的。

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

【讨论】：