El método resize() es un método incorporado en jQuery que se usa cuando la ventana del navegador cambia de tamaño. El método resize() activa el evento de cambio de tamaño o adjunta una función para que se ejecute cuando ocurre un evento de cambio de tamaño. jQuery tiene un método incorporado para eventos de cambio de tamaño de ventana.
Sintaxis:
$(selector).resize(function)
Esta sintaxis se usa para eventos de cambio de tamaño entre navegadores.
Ejemplo 1: este ejemplo utiliza el método resize() para contar cuántas veces cambia el tamaño de la ventana de los navegadores.
<!DOCTYPE html>
<html>
<head>
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">
</script>
<script>
var x = 1;
$(document).ready(function() {
$(window).resize(function() {
$("span").text(x += 1);
});
});
</script>
</head>
<body>
<p>Window resized <span>0</span> times.</p>
<p>Try resizing your browser window.</p>
</body>
</html>
Producción:
- Antes de cambiar el tamaño de las ventanas del navegador:
- Después de cambiar el tamaño de las ventanas del navegador:
Puede usar el método addEventListener() para registrar un controlador de eventos para escuchar el evento de cambio de tamaño de la ventana del navegador, como window.addEventListener(‘resize’, …).
Sintaxis:
object.addEventListner("resize", myscript);
Ejemplo 2: Este ejemplo muestra el tamaño de las ventanas de cambio de tamaño.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>JavaScript Window Resize Event</title>
</head>
<body>
<div id="result"></div>
<script>
// Defining event listener function
function displayWindowSize() {
// Get width and height of the window
// excluding scrollbars
var w = document.documentElement.clientWidth;
var h = document.documentElement.clientHeight;
// Display result inside a div element
document.getElementById("result").innerHTML
= "Width: " + w + ", " + "Height: " + h;
}
// Attaching the event listener function
// to window's resize event
window.addEventListener("resize", displayWindowSize);
// Calling the function for the first time
displayWindowSize();
</script>
<p>
<strong>Note:</strong> Please resize the browser
window to see how it works.
</p>
</body>
</html>
Producción:
- Antes de cambiar el tamaño de la ventana del navegador:
- Después de cambiar el tamaño de la ventana del navegador:
Publicación traducida automáticamente
Artículo escrito por divyanksingh200 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA