使用JavaScript检查元素CSS显示

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

就像sdleihssirhc在下面说的那样，如果元素的display继承或由CSS规则指定，则需要获取其计算样式：

return getComputedStyle(element, null).display;

元素具有一个style属性，可以告诉您想要什么，如果样式是内联声明的或使用JavaScript声明的：

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

将为您提供一个字符串值。

如果样式声明为内联或使用JavaScript声明，则可以直接获取该style对象：

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

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

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

将null被要求在Firefox 3及以下版本。

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

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

您可以像这样检查它：

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

这个答案并非您想要的，但在某些情况下可能会有用。如果您知道该元素在显示时具有某些尺寸，则也可以使用以下方法：

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

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

是。

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

基本的JavaScript：

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

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

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

如果您使用的是jQuery，则可以改用以下方法：

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

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

您可以使用jQuery检查它：

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

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