equivalente no jQuery de: visible en JavaScript?

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:

  • Tienen un valor de visualización de CSS de ninguno.
  • Son elementos de formulario con type = "hidden".
  • Su ancho y alto se establecen explícitamente en 0.

Un elemento ancestro está oculto, por lo que el elemento no se muestra en la página.

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

preguntado el 09 de marzo de 12 a las 16:03

why do you bother if you have in jquery? -

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

Aquí jQuery checks an element as to whether it passes the selector. -

3 Respuestas

You can get the relevant code from the the código fuente:

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 puede ser reemplazado con getComputedStyle (o .currentStyle para IE).
  • jQuery.support.reliableHiddenOffsets is a variable which determines whether the properties are reliable (IE8-).

respondido 09 mar '12, 17:03

@yes123 When the element is not visible, the ofsetWidth y offsetHeight properties are zero. An element is also not visible when the parent is invisible. - Rob W

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.

respondido 09 mar '12, 17:03

I'd recommend 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.

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

respondido 09 mar '12, 16:03

estoy casi certain that Sizzle does not support :visible. - José Silber

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.