Método 1: Comprobación de la altura, el ancho y el rectángulo delimitador del elemento: se puede comprobar si el elemento es visible comprobando la altura, el ancho y las dimensiones del rectángulo delimitador del elemento.
La propiedad offsetHeight se usa para obtener la altura de un elemento, incluido el relleno vertical y los bordes, si están presentes. Devolverá un número entero con la altura en píxeles.
De manera similar, la propiedad offsetWidth se usa para obtener el ancho de un elemento, incluido el relleno horizontal y los bordes, si están presentes. Devolverá un número entero con el ancho en píxeles.
getClientRects () se usa para obtener la colección del rectángulo delimitador del elemento. Devuelve una lista de objetos DOMRect. La propiedad de longitud de esta lista se puede usar para verificar si la lista tiene algún objeto rectangular. Si la longitud devuelta es 0, significa que no se encontraron objetos de rectángulo.
La combinación de estos tres resultados se toma en conjunto para probar si el elemento es visible. Si devuelve el valor verdadero, el objeto es visible y el valor falso significa que el objeto es invisible.
Ejemplo:
<!DOCTYPE html>
<html>
<head>
<title>
How to check if an element
is visible in DOM?
</title>
<style>
.visible {
height: 100px;
width: 100px;
background-color: green;
}
.invisible {
height: 100px;
width: 100px;
background-color: green;
display: none;
}
</style>
</head>
<body>
<h1 style="color: green">
GeeksforGeeks
</h1>
<b>
How to check if element
is visible in DOM?
</b>
<p>
Below is a visible object
</p>
<div class="visible"></div>
<p>
Below is a invisible
object
</p>
<div class="invisible"></div>
<p>
Click on the button to check for the
visibility of the objects.
</p>
<p>Output for visible object:
<span class="outputVisible"></span>
</p>
<p>
Output for non visible object:
<span class="outputInvisible"></span>
</p>
<button onclick="checkVisibility()">
Click here
</button>
<script type="text/javascript">
function isElementVisible(element) {
if (element.offsetWidth ||
element.offsetHeight ||
element.getClientRects().length)
return true;
else
return false;
}
function checkVisibility() {
visibleObject =
document.querySelector(".visible");
invisibleObject =
document.querySelector(".invisible");
document.querySelector(".outputVisible").textContent
= isElementVisible(visibleObject);
document.querySelector(".outputInvisible").textContent
= isElementVisible(invisibleObject);
}
</script>
</body>
</html>
Producción:
- Antes de hacer clic en el botón:
- Después de hacer clic en el botón:
Método 2: Usar getComputedStyle() mÉTODO: El método getComputedStyle() se usa para devolver un objeto que contiene todas las propiedades CSS del elemento. Cada una de estas propiedades ahora se puede verificar para cualquier propiedad requerida.
La propiedad de visualización se utiliza para especificar el comportamiento de visualización de un elemento. El valor ‘ninguno’ de esta propiedad oculta completamente el elemento de la página. Esta propiedad se verifica con el valor ‘ninguno’ en el objeto de estilo devuelto. Un valor de retorno verdadero significa que el objeto es invisible y el valor falso significa que el objeto es visible.
Ejemplo:
<!DOCTYPE html>
<html>
<head>
<title>
How to check if element
is visible in DOM?
</title>
<style>
.visible {
height: 100px;
width: 100px;
background-color: green;
}
.invisible {
height: 100px;
width: 100px;
background-color: green;
display: none;
}
</style>
</head>
<body>
<h1 style="color: green">
GeeksforGeeks
</h1>
<b>
How to check if element
is visible in DOM?
</b>
<p>Below is a visible object</p>
<div class="visible"></div>
<p>Below is a invisible object</p>
<div class="invisible"></div>
<p>
Click on the button to check for the
visibility of the objects.
</p>
<p>
Output for visible object:
<span class="outputVisible"></span>
</p>
<p>
Output for non visible object:
<span class="outputInvisible"></span>
</p>
<button onclick="checkVisibility()">
Click here
</button>
<script type="text/javascript">
function isElementVisible(element) {
let style = window.getComputedStyle(element);
if (style.display == 'none')
return false;
else
return true;
}
function checkVisibility() {
visibleObject =
document.querySelector(".visible");
invisibleObject =
document.querySelector(".invisible");
document.querySelector(".outputVisible").textContent
= isElementVisible(visibleObject);
document.querySelector(".outputInvisible").textContent
= isElementVisible(invisibleObject);
}
</script>
</body>
</html>
Producción:
- Antes de hacer clic en el botón:
- Después de hacer clic en el botón:
Publicación traducida automáticamente
Artículo escrito por sayantanm19 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA