El cambio en la dimensión de un div se puede detectar utilizando 2 enfoques:
Método 1: Comprobación de cambios mediante la interfaz
ResizeObserver La interfaz ResizeObserver se utiliza para informar cambios en las dimensiones de un elemento.
El elemento a rastrear se selecciona primero usando jQuery. Se crea un objeto ResizeObserver con una función de devolución de llamada que define qué acción se debe realizar cuando se detecta un cambio en la dimensión.
El método observe() de este objeto se usa en el elemento que se va a rastrear. Esto comprobará si hay cambios y ejecutará la función de devolución de llamada cuando se detecte cualquier cambio de dimensión.
Sintaxis:
let resizeObserver = new ResizeObserver(() => {
console.log("The element was resized");
});
resizeObserver.observe(elem);
Ejemplo:
<!DOCTYPE html>
<html>
<head>
<title>
How to detect DIV’s dimension changed?
</title>
<style>
#box {
resize: both;
border: solid;
background-color: green;
height: 100px;
width: 100px;
overflow: auto;
}
</style>
</head>
<body>
<h1 style="color: green">
GeeksForGeeks
</h1>
<b>
How to detect DIV’s dimension changed?
</b>
<p>Check the console to know if the div's dimensions have changed.
</p>
<div id="box"></div>
<script src="https://code.jquery.com/jquery-3.3.1.min.js">
</script>
<script>
elem = $("#box")[0];
let resizeObserver = new ResizeObserver(() => {
console.log("The element was resized");
});
resizeObserver.observe(elem);
</script>
</body>
</html>
Producción:
- Antes de cambiar el tamaño del elemento:
- Después de cambiar el tamaño del elemento:
Método 2: Comprobación de cambios en las dimensiones cada 500 milisegundos
Este método consiste en comprobar las dimensiones del elemento que se va a rastrear cada 500 milisegundos. Los valores de las dimensiones se comparan con los valores de la iteración anterior para verificar si hay alguna diferencia.
La altura y el ancho del elemento a rastrear se encuentran utilizando el método de altura() y ancho() en jQuery. Estas dimensiones se utilizarán como las últimas dimensiones de referencia rastreadas del elemento y se almacenarán en una variable.
Se crea una nueva función en la que se averigua la altura y el ancho del elemento. Estas serán las nuevas dimensiones que se compararán con las anteriores. Se usa una declaración if donde esta nueva altura y ancho se comparan con la línea de base encontrada previamente. Si las dimensiones no coinciden, significa que las dimensiones han cambiado. Aquí se ejecutará la acción necesaria que se debe realizar cuando cambien las dimensiones.
Las nuevas dimensiones encontradas se asignarían a las más antiguas como línea de base para que la próxima iteración pueda verificarse con ellas.
La función creada está continuamente en un bucle cada 500 milisegundos usando la función setInterval() . Esto verificará continuamente los cambios en altura y ancho y ejecutará la función dada siempre que haya una diferencia.
Este método es considerablemente más lento que el anterior y disminuir el tiempo entre cada verificación reduciría aún más el rendimiento.
Sintaxis:
let lastHeight = $("#box").height();
let lastWidth = $("#box").width();
function checkHeightChange() {
newHeight = $("#box").height();
newWidth = $("#box").width();
if (lastHeight != newHeight || lastWidth != newWidth) {
console.log("The element was resized");
// assign the new dimensions
lastHeight = newHeight;
lastWidth = newWidth;
}
}
setInterval(checkHeightChange, 500);
Ejemplo:
<!DOCTYPE html>
<html>
<head>
<title>
How to detect DIV’s dimension changed?
</title>
<style>
#box {
resize: both;
border: solid;
background-color: green;
height: 100px;
width: 100px;
overflow: auto;
}
</style>
</head>
<body>
<h1 style="color: green">
GeeksForGeeks
</h1>
<b>
How to detect DIV’s dimension changed?
</b>
<p>Check the console to know if the div's dimensions have changed.
</p>
<div id="box"></div>
<script src="https://code.jquery.com/jquery-3.3.1.min.js">
</script>
<script type="text/javascript">
let lastHeight = $("#box").height();
let lastWidth = $("#box").width();
function checkHeightChange() {
newHeight = $("#box").height();
newWidth = $("#box").width();
if (lastHeight != newHeight ||
lastWidth != newWidth) {
console.log("The element was resized");
// assign the new dimensions
lastHeight = newHeight;
lastWidth = newWidth;
}
}
setInterval(checkHeightChange, 500);
</script>
</body>
</html>
Producción:
- Antes de cambiar el tamaño del elemento:
- Después de cambiar el tamaño del elemento:
Publicación traducida automáticamente
Artículo escrito por sayantanm19 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA