使用JavaScript检查元素CSS显示

Question

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

Answer 1

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

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

会给你一个字符串值.

正如下面sdleihssirhc所说,如果元素display是继承的或由CSS规则指定的,那么你需要得到它的计算样式:

return getComputedStyle(element, null).display;

什么是`currentStyle`？从来没有听说过,还检查了`document.body.currentStyle`并没有得到任何东西(并不感到惊讶) (9认同)
为简单起见,为什么不总是得到计算的样式？ (4认同)
感谢您的评论。为现代网络更新了答案。 (4认同)
如果它没有内联css怎么办？ (2认同)
@vsync（并供将来参考）[根据 MDN](https://developer.mozilla.org/en-US/docs/Web/API/Element/currentStyle)，它是旧版 Internet Explorer 的专有属性。 (2认同)

Answer 2

如果样式是内联或使用JavaScript声明的,那么您只需获取style对象:

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

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

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

这null是Firefox 3及以下版本所必需的.

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'); 
}