Dans ce tutoriel, nous allons explorer un script simple qui permet de suivre et d’afficher les dimensions actuelles de la fenêtre de votre navigateur avec resize en javascript. Ce script met à jour en temps réel la hauteur et la largeur de la fenêtre lorsqu’elle est redimensionnée. Voici le code source du script :
Redimensionnez la fenêtre du navigateur pour déclencher l’événement de redimensionnement.
⬆ Hauteur de la fenêtre : px
⬅ Largeur de la fenêtre : px
Comprendre le suivi des dimensions de la fenêtre grâce à resize en JavaScript
Pour commencer, on définit la structure HTML :
<p>Hauteur de la fenêtre : <span id="height"></span>px</p>
<p>Largeur de la fenêtre : <span id="width"></span>px</p>Sélection des Éléments du DOM
La première partie du script sélectionne deux éléments du Document Object Model (DOM) en utilisant document.querySelector. Ces éléments doivent avoir les identifiants height et width. Ils seront précédés du symbole # car il s’agit d’un attribut id. Ces éléments serviront à afficher la hauteur et la largeur de la fenêtre.
const heightOutput = document.querySelector("#height");
const widthOutput = document.querySelector("#width");Définition de la fonction de suivi
La fonction resizeListener est ensuite définie. Cette fonction met à jour le contenu textuel des éléments sélectionnés heightOutput et widthOutput avec les dimensions actuelles de la fenêtre du navigateur. window.innerHeight et window.innerWidth sont utilisés pour obtenir respectivement la hauteur et la largeur de la fenêtre.
function resizeListener() {
heightOutput.textContent = window.innerHeight;
widthOutput.textContent = window.innerWidth;
}Écouteur pour le redimensionnement avec l’évènement rezise en javascript
Enfin, le script ajoute un écouteur d’événement à l’objet window pour l’événement resize. Chaque fois que la fenêtre est redimensionnée, la fonction resizeListener est appelée, mettant à jour les dimensions affichées.
window.addEventListener("resize", resizeListener);Démonstration de l’évènement resize en javascript
Pour utiliser ce script, vous devez avoir des éléments HTML avec les identifiants height et width. Par exemple :
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Suivi des Dimensions de la Fenêtre</title>
</head>
<body>
<div>
Hauteur: <span id="height"></span> pixels
</div>
<div>
Largeur: <span id="width"></span> pixels
</div>
<script>
const heightOutput = document.querySelector("#height");
const widthOutput = document.querySelector("#width");
function resizeListener() {
heightOutput.textContent = window.innerHeight;
widthOutput.textContent = window.innerWidth;
}
window.addEventListener("resize", resizeListener);
</script>
</body>
</html>Ce script est un excellent exemple de l’utilisation de JavaScript pour interagir avec les événements du navigateur et manipuler le DOM en temps réel. Il peut être particulièrement utile pour les développeurs qui souhaitent créer des interfaces utilisateur réactives ou surveiller les dimensions de la fenêtre pour des raisons de mise en page dynamique. En comprenant ce code, vous pouvez adapter et étendre ces concepts à des projets plus complexes nécessitant des interactions utilisateur en temps réel.
