Evento de cambio de tamaño de ventana en JavaScript

Ammar Ali 30 enero 2023

JavaScript JavaScript Event

Agregar un evento de cambio de tamaño usando la función addEventListener() en JavaScript
Agregar un evento de cambio de tamaño usando la función onresize() en JavaScript

Evento de cambio de tamaño de ventana en JavaScript

Este tutorial discutirá cómo agregar un evento de cambio de tamaño usando las funciones addEventListener() y onresize() en JavaScript.

Agregar un evento de cambio de tamaño usando la función `addEventListener()` en JavaScript

Para agregar un evento de cambio de tamaño a la ventana, podemos usar la función addEventListener() en JavaScript. Esta función agrega un evento que contiene una función a un objeto. Por ejemplo, agreguemos un evento a la ventana del objeto para obtener su ancho y alto y mostrarlo en la página web. Vea el código a continuación.

<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>
	<span>Width = </span><span id="SpanID1"></span>
	<br />
	<span>Height = </span><span id="SpanID2"></span>
	<script type="text/javascript">
start();
window.addEventListener('resize', start);

function start(){
  document.getElementById('SpanID1').innerText = document.documentElement.clientWidth;
  document.getElementById('SpanID2').innerText = document.documentElement.clientHeight;
}
	</script>
</body>
</html>

Producción :

Width = 798
Height = 779

En el código anterior, agregamos un intervalo con el texto Width=, y después de eso, agregamos un intervalo vacío con una identificación SpanID1 en la sección del cuerpo. Agregamos una etiqueta br para mover el cursor a una nueva línea, y en la nueva línea, agregamos otro intervalo con el texto Height=, y después de eso, agregamos otro intervalo vacío con un id SpanID2.

La identificación del intervalo se utilizará para obtener el elemento en JavaScript. En la etiqueta de script, tenemos una función start(), que se usa para cambiar el texto de los dos tramos con el ancho y alto de la ventana. Después de la función start(), agregamos el evento resize, que llamará a la función start() cuando un usuario cambie el tamaño de la ventana. El ancho y el alto de la ventana se mostrarán en la página y cambiarán a medida que cambie el tamaño de la ventana. Puede guardar el código anterior en un archivo HTML y abrirlo con cualquier navegador y cambiar su tamaño para ver si el código funciona o no. También puede usar la función addEventListener() para agregar un evento a cualquier objeto, como una casilla de verificación.

Agregar un evento de cambio de tamaño usando la función `onresize()` en JavaScript

Para agregar un evento de cambio de tamaño a la ventana, podemos usar la función onresize() en JavaScript. Esta función se utiliza para especificar qué sucederá si se cambia el tamaño de una ventana. Por ejemplo, agreguemos un evento a la ventana del objeto para obtener su ancho y alto y mostrarlo en la página web. Vea el código a continuación.

<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>
	<span>Width = </span><span id="SpanID1"></span>
	<br />
	<span>Height = </span><span id="SpanID2"></span>
	<script type="text/javascript">
start();
window.onresize = start;
function start(){
  document.getElementById('SpanID1').innerText = document.documentElement.clientWidth;
  document.getElementById('SpanID2').innerText = document.documentElement.clientHeight;
}
	</script>
</body>
</html>

Producción :

Width = 798
Height = 779

En el código anterior, se llamará a la función start() si se cambia el tamaño de la ventana. Como puede ver, el resultado es el mismo que el del método anterior.

Autor: Ammar Ali

Hello! I am Ammar Ali, a programmer here to learn from experience, people, and docs, and create interesting and useful programming content. I mostly create content about Python, Matlab, and Microcontrollers like Arduino and PIC.

LinkedIn Facebook

Agregar un evento de cambio de tamaño usando la función addEventListener() en JavaScript

Agregar un evento de cambio de tamaño usando la función onresize() en JavaScript

Artículo relacionado - JavaScript Event

Agregar un evento de cambio de tamaño usando la función `addEventListener()` en JavaScript

Agregar un evento de cambio de tamaño usando la función `onresize()` en JavaScript