Événement de redimensionnement de fenêtre en JavaScript

Ammar Ali 30 janvier 2023

JavaScript JavaScript Event

Ajouter un événement de redimensionnement à l’aide de la fonction addEventListener() en JavaScript
Ajouter un événement de redimensionnement à l’aide de la fonction onresize() en JavaScript

Événement de redimensionnement de fenêtre en JavaScript

Ce tutoriel abordera l’ajout d’un événement de redimensionnement à l’aide des fonctions addEventListener() et onresize() en JavaScript.

Ajouter un événement de redimensionnement à l’aide de la fonction `addEventListener()` en JavaScript

Pour ajouter un événement de redimensionnement à la fenêtre, nous pouvons utiliser la fonction addEventListener() en JavaScript. Cette fonction ajoute un événement qui contient une fonction à un objet. Par exemple, ajoutons un événement à la fenêtre d’objet pour obtenir sa largeur et sa hauteur et l’afficher sur la page Web. Voir le code ci-dessous.

<!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>

Production:

Width = 798
Height = 779

Dans le code ci-dessus, nous avons ajouté un span avec le texte Width=, et après cela, nous avons ajouté un span vide avec un identifiant SpanID1 dans la section body. Nous avons ajouté une balise br pour déplacer le curseur sur une nouvelle ligne, et sur la nouvelle ligne, nous avons ajouté un autre span avec le texte Height=, et après cela, nous avons ajouté un autre span vide avec un identifiant SpanID2.

L’identifiant du span sera utilisé pour obtenir l’élément en JavaScript. Dans la balise script, nous avons une fonction start(), qui permet de modifier le texte des deux travées avec la largeur et la hauteur de la fenêtre. Après la fonction start(), nous avons ajouté l’événement resize, qui appellera la fonction start() lorsqu’un utilisateur redimensionne la fenêtre. La largeur et la hauteur de la fenêtre seront affichées sur la page et elles changeront en fonction de la taille de la fenêtre. Vous pouvez enregistrer le code ci-dessus dans un fichier HTML et l’ouvrir avec n’importe quel navigateur et modifier sa taille pour voir si le code fonctionne ou non. Vous pouvez également utiliser la fonction addEventListener() pour ajouter un événement à n’importe quel objet, comme une case à cocher.

Ajouter un événement de redimensionnement à l’aide de la fonction `onresize()` en JavaScript

Pour ajouter un événement de redimensionnement à la fenêtre, nous pouvons utiliser la fonction onresize() en JavaScript. Cette fonction est utilisée pour spécifier ce qui se passera si la taille d’une fenêtre est modifiée. Par exemple, ajoutons un événement à la fenêtre d’objet pour obtenir sa largeur et sa hauteur et l’afficher sur la page Web. Voir le code ci-dessous.

<!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>

Production:

Width = 798
Height = 779

Dans le code ci-dessus, la fonction start() sera appelée si la taille de la fenêtre est modifiée. Comme vous pouvez le voir, la sortie est la même que celle de la méthode ci-dessus.

Auteur: 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

Ajouter un événement de redimensionnement à l’aide de la fonction addEventListener() en JavaScript

Ajouter un événement de redimensionnement à l’aide de la fonction onresize() en JavaScript

Article connexe - JavaScript Event

Ajouter un événement de redimensionnement à l’aide de la fonction `addEventListener()` en JavaScript

Ajouter un événement de redimensionnement à l’aide de la fonction `onresize()` en JavaScript