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.

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.

• javascript
• jquery

• 1 why do you bother if you have in jquery? – dynamic Commented Mar 9, 2012 at 16:56
• 1 visibility: hidden; ist not part of the equation? Don't know about a equivalent, but this is some what a short function to write. -- @yes123 Sometimes you need a function and not all the core framework as overhead. – Smamatti Commented Mar 9, 2012 at 16:57
• Here jQuery checks an element as to whether it passes the selector. – pimvdb Commented Mar 9, 2012 at 17:00

3 Answers 3

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

I just look at jquery first as it is JavaScript. Here is the actual code:

if ( jQuery.expr && jQuery.expr.filters ) {

    // here is the real guts of it
    jQuery.expr.filters.hidden = function( elem ) {

        // plain old JavaScript determining offset
        var width = elem.offsetWidth,
        height = elem.offsetHeight;

        // if any of these are "true" then its "invisible"
        return ( width === 0 && height === 0 ) || 
        (!jQuery.support.reliableHiddenOffsets && 
        ((elem.style && elem.style.display) || 
        jQuery.css( elem, "display" )) === "none");
    };

    // this is just checking for not hidden
    jQuery.expr.filters.visible = function( elem ) {
        return !jQuery.expr.filters.hidden( elem );
    };
}

The "reliableHiddenOffsets" code is defined way before this and you can see it below

isSupported = ( tds[ 0 ].offsetHeight === 0 );

tds[ 0 ].style.display = "";
tds[ 1 ].style.display = "none";

// Check if empty table cells still have offsetWidth/Height
// (IE <= 8 fail this test)
support.reliableHiddenOffsets = isSupported && ( tds[ 0 ].offsetHeight === 0 );

The real lesson here is this stuff is not rocket science. Crack open jQuery and take a look. The real gem of jQuery is its been tested and banged on so hard that you will probably not find any issues with it. That's worth so much besides the great selector engine and abstraction. Don't be afraid to actually look. You will learn something in the process as a nice side effect.

I'd remend you use at the very least some selector library that does this work for you. Otherwise you're just wasting your effort in something that has already been tested and proven successful for no particular reason, and you're bound to probably even get it wrong the first few attempts you make.

For instance Sizzle is only 4kb when minified/gzipped so I see virtually no reason not to use it.