如何使用 javascript 检查可见性属性答案

【问题标题】：How to check the visibility property with javascript如何使用 javascript 检查可见性属性
【发布时间】：2012-08-01 17:24:48
【问题描述】：

我测试了以下 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 - 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 中测试。

【问题讨论】：

标签： javascript css properties

【解决方案1】：

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

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

【讨论】：

我有一个带有 webview 显示 HTML + Javascript 的 Android 项目，这给了我一个错误："Uncaught TypeError: Cannot call method 'getPropertyValue' of null"。我猜它不明白window 是什么？

【解决方案2】：

你使用getComputedStyle错了：

getComputedStyle( el ).visibility
//"visible"

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

在 Internet Explorer 中，您将使用：

el.currentStyle.visibility;

【讨论】：

【解决方案3】：

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

【讨论】：