Question

So jQuery provides this awesome pseudo to query in DOM on ‘:visible’, unfortunately, its rather heavily tied into the core of jQuery and Sizzle (or whatever engine you may use). Is there a good equivalent in plain JavaScript when only a given element is known?

A reminder on the jQuery :visible rules:

• They have a CSS display value of none.
• They are form elements with type=”hidden”.
• Their width and height are explicitly set to 0.

An ancestor element is hidden, so the element is not shown on the page.

Note: checking just style of the given element will not always work: a parent might be hidden instead hiding all children.

Answer 1

You can get the relevant code from the the source code:

jQuery.expr.filters.hidden = function( elem ) {
    var width = elem.offsetWidth,
        height = elem.offsetHeight;

    return ( width === 0 && height === 0 ) ||
           (!jQuery.support.reliableHiddenOffsets &&
           ((elem.style && elem.style.display) || jQuery.css( elem, "display" )) === "none");
};

• jQuery.css can be replaced with getComputedStyle (or .currentStyle for IE).
• jQuery.support.reliableHiddenOffsets is a variable which determines whether the properties are reliable (IE8-).