javascript - 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 は毎回正しいスタイルを返します (それを追跡する方法はわかりません)。これは、失敗した試みの1 つのフィドルです。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 でテスト済み。

Answer 1

getComputedStyleグローバルメソッドです。次のように使用します。

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

Answer 2

あなたはgetComputedStyle間違って使用しています：

getComputedStyle( el ).visibility
//"visible"

デモ: http://jsfiddle.net/hMFry/1/

Internet Explorer では、次のように使用します。

el.currentStyle.visibility;

Answer 3

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