How to detect if an element is not visible in a fast way in JavaScript?

Question

In the past we used the CSS attribute "display" to show and hide DOM elements. To check if an element is visible, we could just use:

element.offsetWidth > 0

Since we had some problems with Flash and Java Applets (they stop when they get display:none) we switched to the CSS attribute "visibility".

I am now looking for a fast and easy way to check if an element is not visible.

I have tried the following:

• Checking the attribute itself on the element and and all parents => too slow
• Checking the calculated style directly from the browser (element.currentStyle or window.getComputedStyle() plus getPropertyValue(style property)) => also too slow

Do you know any other way or shortcut to see if an element is visible?

Answer 1

use JQuery and the you can do this

var isVisible = $('#foo').is(':visible');