你可以使用JavaScript检查对象的CSS显示吗？

是否有可能检查对象的CSS display == block或none使用JavaScript？

Answer 1

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

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

会给你一个string值。

正如下面的sdleihssirhc所说的，如果元素的display被inheritance或者被CSS规则指定，你需要得到它的计算样式：

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

Answer 2

如果样式是以内联或者JavaScript的forms声明的，那么可以直接使用style对象：

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

否则，你将不得不得到计算的风格，并有浏览器不一致。 IE使用一个简单的currentStyle对象，但其他人使用一个方法：

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

在Firefox中需要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'也是隐藏的，但仍然有element.style.display !== 'none' 。

Answer 5

是。

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

Answer 6

要查看它是否可用普通的JavaScript显示，请检查display属性是否为'none'（不要检查'block'，它也可以是空白或'inline'且仍然可见）：

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

如果你正在使用jQuery，你可以使用它来代替：

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

Answer 7

基本的JavaScript：

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

Answer 8

你可以用例如jQuery来检查它：

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

它将返回关于这个元素的显示属性的信息。

Answer 9

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