non-jQuery equivalent of :visible in JavaScript?

javascript, jquery

Solution

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-).

Problem

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.

Original source