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

是否有可能检查对象的CSS display == blocknone使用JavaScript?

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

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

会给你一个string值。

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

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

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

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

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

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

在Firefox中需要null

对于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'也是隐藏的,但仍然有element.style.display !== 'none'

是。

 var displayValue = document.getElementById('yourid').style.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'); } 

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

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

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

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