¿Cuál es la mejor manera de probar un elemento en DOM

Question

? Hay un par de maneras en que puedo hacer esto (que yo sepa).

Prueba de pantalla css

if ($('#foo').css('display') == 'none') 

prueba la visibilidad

if ($('#foo').is(':visible')) 

En la visibilidad puedo comprobar si el elemento está ahí.

Los elementos se consideran visibles si consumen espacio en el documento. Los elementos visibles tienen un ancho o una altura que es mayor que cero.

Elementos con visibilidad: oculta u opacidad: 0 se consideran visibles, ya que aún consumen espacio en el diseño.

Source

embargo, cabe destacar que tanto en que no puedo probar la visibilidad (por el usuario) porque:

Ocultación de un elemento se puede hacer mediante el establecimiento de la propiedad de presentación a "none" o la propiedad de visibilidad a "hidden". Sin embargo, observe que estos dos métodos producen resultados diferentes:

visibilidad: oculto esconde un elemento, pero todavía tendrá el mismo espacio como antes. El elemento estará oculto, pero aún afectará el diseño .

pantalla: ninguno oculta un elemento, y no ocupará espacio. El elemento se ocultará y se mostrará la página como si el elemento no está ahí:

Source

Así que en ninguno de los ejemplos que prueba si el elemento es visible en todos los sentidos para el usuario.

Así que mi pregunta es:

• żQué las diferencias entre los códigos de dos si es desde arriba?
• ¿Cuál es la mejor manera de probar si un elemento es visible para el usuario:

qué tengo que usar algo como:

if ($('#foo').is(':visible') && 
    $('#foo').css('opacity') > 0 && 
    $('#foo').css('visibility') != 'hidden') 

Answer 1

creo que la mejor opción es llevar a cabo una función personalizada como a continuación y probar/mejorar a medida que surgen cosas nuevas,

$.fn.isReallyVisible = function() { //rename function name as you like.. 
    return (this.css('display') != 'none' && 
      this.css('visibility') != 'hidden' && 
      this.css('opacity') > 0); 
} 

Lo anterior debe ser a prueba de navegador cruzado, ya que estamos e utilizando la función jQuery .css (específicamente para la opacidad).

DEMO

Answer 2

La diferencia entre los dos es que el ser oculto usando el atributo "visible" deja el elemento en la página, simplemente no se muestra realmente. Por lo tanto, su espacio se tendrá en cuenta cuando la página represente el resto de la pantalla.

Parece que hacerlo de otra forma impide que el elemento se coloque en la página, lo que puede cambiar el diseño de otros elementos de la página.

usualmente probando la parte visible es suficiente desde mi experiencia, pero si quiere ser más completo, entonces sí tendría que verificar usando las condiciones "& &" en múltiples atributos. Realmente todo depende de qué tan limpio esté el código que está utilizando y qué tan bien probado esté el resto del aspecto de la interfaz de usuario del sistema.

La otra cosa a considerar es cuál es el propósito de la prueba. ¿Estás probando el código que escribiste o cómo el navegador está usando Javascript para representar la página? Desea probar el código que está creando y confiar en el hecho de que el navegador funciona (porque si el navegador deja de funcionar, entonces todo no es confiable). Entonces, si su código le dice al elemento que establezca algún atributo, entonces la verificación de ese atributo es toda la prueba que debe hacer. Cualquier cosa adicional solo puede probarse probando fuera del código en sí (como al mirar la página manualmente y otras cosas por el estilo).

Answer 3

Si desea ver si existe un elemento en el DOM puede simplemente hacer esto:

$.fn.exists = function() { 
    return this.length > 0; 
} 

Uso:

$('#myid').exists();