4

我测试了以下 div 的可见性：

<div id="div1">div</div>

单独定义的样式

#div1 {
    visibility:visible; //or hidden
}

如果样式是内联定义的，<div id="div1" style="visibility:visible">div</div>则很容易检查属性中的可见element.style.visibility性。但问题是当单独定义样式时（如上所示 - #div1、.div1 或 div）。

那么在哪里可以只使用纯 JavaScript 检查可见性属性呢？jQuery 每次都返回正确的样式（我不知道如何跟踪它），那么他们是怎么做到的呢？这是我不成功的尝试的一个小技巧，除了 jQuery 的工作之外没有任何测试：

alert($(el).css('visibility')); // jQuery works well - returns correct property
alert(el.style.visibility); // not works - always empty string
alert(el.offsetWidth > 0 || el.offsetHeight > 0 ? 'yes':'no'); // also not working - always true - http://stackoverflow.com/questions/1343237/how-to-check-elements-visibility-via-javascript
alert(el.getComputedStyle); // undefined - http://stackoverflow.com/questions/4795473/check-visibility-of-an-object-with-javascript
alert(el.getAttribute('visibility')); // not works - of course null

关于如何成功的任何想法？在最新的 Firefox 15 中测试。

4

3 回答 3

6

getComputedStyle是一种全局方法。按如下方式使用它：

window.getComputedStyle(el, null).getPropertyValue('visibility');
于 2012-08-01T17:27:20.063 回答
3

您使用getComputedStyle错误：

getComputedStyle( el ).visibility
//"visible"

演示：http: //jsfiddle.net/hMFry/1/

在 Internet Explorer 中，您将使用：

el.currentStyle.visibility;
于 2012-08-01T17:27:29.327 回答
1 
getComputedStyle(el).getPropertyValue('visibility');
于 2012-08-01T17:28:34.020 回答