¿Cómo verificar que un elemento esté visible o no usando jQuery?

Dado un documento HTML y la tarea es verificar que el elemento esté visible o no usando jQuery : selector visible. El selector :visible se puede usar con la función .toggle() para alternar la visibilidad de un elemento. Funcionará con la visibilidad de los elementos: oculto; u opacidad: 0;

Sintaxis:

$(element).is(":visible");

Ejemplo 1: este ejemplo usa :selector visible para verificar que un elemento esté visible o no usando jQuery.

<!DOCTYPE html>
<html>
  
<head>
    <title>
        How to check an element is
        visible or not using jQuery?
    </title>
      
    <script src=
"https://code.jquery.com/jquery-1.12.4.min.js">
    </script>
</head>
  
<body style="text-align:center;">
  
    <h1 style = "color:green;" > 
        GeeksForGeeks 
    </h1> 
      
    <h3>
        How to check an element is 
        visible or not using jQuery ?
    </h3>
      
    <p style="display: none;">
        GEEKSFORGEEKS - A computer science
        portal for geeks.
    </p>
      
    <input onclick="change()" type="button"
        value="Click to Display" id="myButton1">
    </input>
      
    <script type="text/javascript">
        $(document).ready(function() {
            $("input").click(function() {
                  
                // Display hide paragraph on button click
                if (this.value == "Click to Display") 
                    this.value = "Click to Hide";
                else this.value = "Click to Display";
                  
                $("p").toggle("slow", function() {
                      
                    // Check paragraph once toggle
                    // effect is completed
                    if($("p").is(":visible")) {
                        alert("Paragraph is visible.");
                    } else {
                        alert("Paragraph is hidden.");
                    }
                });
            });
        });
    </script>
</body>
  
</html>        

Producción:

Ejemplo 2: Este ejemplo usa :selector visible para verificar que un elemento esté visible o no usando jQuery.

<!DOCTYPE html>
<html>
  
<head>
    <title>
        How to check an element is
        visible or not using jQuery?
    </title>
  
    <script src=
"https://code.jquery.com/jquery-1.12.4.min.js">
    </script>
      
    <style> 
        h1 { 
            color: green; 
        } 
        table, th, td { 
            border: 1px solid black; 
            text-align: center;
        } 
    </style>
</head>
  
<body>
    <center>
    <h1 style = "color:green;" > 
        GeeksForGeeks 
    </h1> 
      
    <h3>
        How to check an element is 
        visible or not using jQuery?
    </h3>
      
    <input onclick="change()" type="button"
        value="Click to Display" id="myButton1">
    </input>
      
    <table style="width:70% "> 
      
        <tr> 
            <th>Language Index</th> 
            <th>Language Name</th> 
        </tr> 
        <tr> 
            <td>1</td> 
            <td>C</td> 
        </tr> 
        <tr> 
            <td>2</td> 
            <td>C++</td> 
        </tr> 
        <tr> 
            <td>3</td> 
            <td>Java</td> 
        </tr> 
        <tr> 
            <td>4</td> 
            <td>Python</td> 
        </tr> 
        <tr> 
            <td>5</td> 
            <td>HTML</td> 
        </tr> 
    </table> 
      
    <h4></h4>
      
    <script type="text/javascript">
        $(document).ready(function() {
            $("input").click(function() {
                  
                // Display hide paragraph on
                // button click
                if (this.value=="Click to Display")
                    this.value = "Click to Hide";
                else 
                    this.value = "Click to Display";
                  
                $("table").toggle("slow", function() {
                      
                    // Check paragraph once toggle
                    // effect is completed
                    if($("table").is(":visible")) {
                        $("h4").text("Paragraph is visible.");
                    } 
                    else {
                        $("h4").text("Paragraph is hidden.");
                    }
                });
            });
        });
    </script>
    <center>
</body>
  
</html>        

Producción:

  • Antes de hacer clic en el botón:
  • Después de hacer clic en el botón «Hacer clic para mostrar»:
  • Después de hacer clic en el botón «Hacer clic para ocultar»:

Publicación traducida automáticamente

Artículo escrito por SHUBHAMSINGH10 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *