如何使用JavaScript检查可见性属性

Question

我测试了以下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每次都返回正确的样式（我不知道如何跟踪它），那他们是如何做到的呢？这里有一个fiddle，其中包含了我的失败尝试，除了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 - https://dev59.com/G3M_5IYBdhLWcg3whznx
alert(el.getComputedStyle); // undefined - https://dev59.com/clPTa4cB1Zd3GeqPlrbE
alert(el.getAttribute('visibility')); // not works - of course null

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

- Stano

Answer 1

getComputedStyle是一个全局方法。可以按照以下方式使用：

window.getComputedStyle(el, null).getPropertyValue('visibility');

- Rob W

---

我有一个Android项目，其中包含一个webview，显示一个HTML + Javascript页面，但是它给了我一个错误："Uncaught TypeError: Cannot call method 'getPropertyValue' of null"。我猜测它不理解什么是window？ - Luis A. Florit

Answer 2

您使用getComputedStyle的方式不正确：

getComputedStyle( el ).visibility
//"visible"

示例: http://jsfiddle.net/hMFry/1/

在Internet Explorer中，您需要使用以下代码:

el.currentStyle.visibility;

- Esailija

Answer 3

getComputedStyle(el).getPropertyValue('visibility');

- Danil Speransky