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

css, dom, javascript

Solution

use JQuery and the you can do this

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

Problem

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?

Original source