Check if element is visible in DOM

Question

Is there any way that I can check if an element is visible in pure JS (no jQuery) ?

So, for example, in this page: Performance Bikes, if you hover over Deals (on the

Answer 1

The jQuery code from http://code.jquery.com/jquery-1.11.1.js has an isHidden param

var isHidden = function( elem, el ) {
    // isHidden might be called from jQuery#filter function;
    // in that case, element will be second argument
    elem = el || elem;
    return jQuery.css( elem, "display" ) === "none" || !jQuery.contains( elem.ownerDocument, elem );
};

So it looks like there is an extra check related to the owner document

I wonder if this really catches the following cases:

1. Elements hidden behind other elements based on zIndex
2. Elements with transparency full making them invisible
3. Elements positioned off screen (ie left: -1000px)
4. Elements with visibility:hidden
5. Elements with display:none
6. Elements with no visible text or sub elements
7. Elements with height or width set to 0