javascript - saber - Detectar si un elemento es visible

saber si un div esta visible javascript

Question

Esta pregunta ya tiene una respuesta aquí:

• ¿Cómo compruebo si un elemento está oculto en jQuery? 53 respuestas

Al usar .fadeIn() y .fadeOut() , he estado ocultando / mostrando un elemento en mi página, pero con dos botones, uno para ocultar y otro para mostrar. Ahora quiero tener un botón para alternar ambos. Por lo tanto, mi pregunta es ¿cómo detecto si el elemento es visible o no?

Mi HTML tal como es:

<a onclick="showTestElement()">Show</a>
<a onclick="hideTestElement()">Hide</a>

Mi JS como es:

<script>
    function showTestElement(){
        $(''#testElement'').fadeIn(''fast'');
    }

    function hideTestElement(){
        $(''#testElement'').fadeOut(''fast'');
    }
</script>

Mi HTML como me gustaría tenerlo:

<a onclick="toggleTestElement()">Show/Hide</a>

Mi JS como me gustaría tenerlo, aunque jQuery puro sería bueno:

<script>
    function toggleTestElement(){
        if (document.getElementById(''testElement'').***IS_VISIBLE***) {
            $(''#testElement'').fadeOut(''fast'');
        }
        else{
            $(''#testElement'').fadeIn(''fast'');
        }
    }
</script>

Cualquier ayuda recibida con gratitud ..

Answer 1

Estas buscando:

.is('':visible'')

Aunque probablemente debas cambiar tu selector para usar jQuery considerando que lo estás usando en otros lugares de todos modos:

if($(''#testElement'').is('':visible'')) {
    // Code
}

Es importante tener en cuenta que si alguno de los elementos principales de un elemento de destino está oculto, entonces .is('':visible'') en el elemento secundario devolverá false (lo que tiene sentido).

jQuery 3

:visible ha tenido una reputación de ser un selector bastante lento, ya que tiene que atravesar el árbol DOM inspeccionando un montón de elementos. Sin embargo, hay buenas noticias para jQuery 3, como lo explica esta publicación ( Ctrl + F para :visible ):

Gracias al trabajo de detective de Paul Irish en Google, identificamos algunos casos en los que podemos omitir un montón de trabajo adicional cuando los selectores personalizados como: visible se usan muchas veces en el mismo documento. ¡Ese caso particular es hasta 17 veces más rápido ahora!

Tenga en cuenta que incluso con esta mejora, los selectores como: visible y: hidden pueden ser costosos porque dependen del navegador para determinar si los elementos se muestran en la página. ¡Esto puede requerir, en el peor de los casos, un nuevo cálculo completo de los estilos CSS y el diseño de la página! Si bien no desalentamos su uso en la mayoría de los casos, recomendamos probar sus páginas para determinar si estos selectores están causando problemas de rendimiento.

Ampliando aún más a su caso de uso específico, hay una función jQuery incorporada llamada $.fadeToggle() :

function toggleTestElement() {
    $(''#testElement'').fadeToggle(''fast'');
}

Answer 2

No hay necesidad, solo usa fadeToggle() en el elemento:

$(''#testElement'').fadeToggle(''fast'');

Aquí hay una demo.

Answer 3

if($(''#testElement'').is('':visible'')){
    //what you want to do when is visible
}