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