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