Groupes du contenu de bas de page dans un tableau
Apprenez tout ce qu'il y a à savoir sur l'attribut d'événement onresize en HTML. Découvrez sa définition, sa syntaxe, son utilisation, des exemples pratiques et des conseils pour l'optimiser dans vos projets web.
Définition de l'attribut onresize
En HTML, l’attribut d'événement onresize est utilisé pour déclencher une fonction JavaScript lorsque la taille de la fenêtre du navigateur ou d’un élément change. Cet événement est particulièrement utile pour ajuster le contenu en fonction de la taille de l'affichage, garantissant ainsi une meilleure expérience utilisateur sur différents appareils et tailles d'écrans.
Syntaxe de onresize
La syntaxe de base de l'attribut onresize est la suivante :
<element onresize="fonctionJavaScript()"></element>
Dans cette syntaxe, element peut être un élément HTML prenant en charge l'attribut onresize (notamment body ou window en JavaScript pur), et fonctionJavaScript() est la fonction qui sera exécutée lors du redimensionnement.
Utilisation de onresize
L'attribut onresize est principalement utilisé pour adapter le contenu d'une page en fonction de la taille de la fenêtre du navigateur. Cet attribut est couramment employé pour :
- Ajuster les dimensions d'éléments visuels en fonction de la taille d'affichage.
- Réorganiser ou redimensionner les éléments dans un design responsive.
- Optimiser les performances en chargeant ou en cachant certains contenus en fonction de l'espace disponible.
Exemple d'utilisation de onresize
Voici un exemple simple montrant comment utiliser onresize pour afficher la largeur actuelle de la fenêtre à chaque redimensionnement.
Exemple : 📋 Copier le code
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Exemple onresize</title>
<style>
#output {
font-size: 1.5em;
margin-top: 20px;
}
</style>
</head>
<body onresize="afficherLargeur()">
<h1>Largeur de la fenêtre : <span id="output"></span></h1>
<script>
function afficherLargeur() {
document.getElementById('output').textContent = window.innerWidth + ' px';
}
// Initialisation pour afficher la largeur dès le chargement
window.onload = afficherLargeur;
</script>
</body>
</html>
Autre exemple : Exécuter un JavaScript lorsque la fenêtre du navigateur est redimensionnée
Exemple : 📋 Copier le code
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>html5 demo</title>
<script>
function showMsg()
{
alert("Vous avez changer la taille de la fenêtre de votre navigateur!");
}
</script>
</head>
<body onresize="showMsg()">
<p>Essayez de redimensionner la fenêtre du navigateur<br> en appuyant sur
le bouton agrandir du navigateur par exemple</p>
</body>
</html>
ce code crée une page simple qui affiche un message d'alerte lorsque la fenêtre du navigateur est redimensionnée. Cela est réalisé en utilisant l'événement onresize associé à la fonction JavaScript showMsg().
Conseils et astuces
- Assurez-vous que l'élément auquel vous attachez l'événement est redimensionnable, par exemple, en spécifiant une largeur et une hauteur en CSS.
- Évitez d'utiliser cet événement de manière excessive, car il peut entraîner des performances médiocres sur des pages complexes.
Appui de navigateur
L'attribut d'événement onresize est généralement bien pris en charge par les navigateurs modernes, tels que Google Chrome, Mozilla Firefox, Microsoft Edge, et Safari.
L'attribut d'événement onresize est pris en charge dans tous les principaux navigateurs.
Cependant, il est recommandé de faire attention à la compatibilité avec les anciennes versions d'Internet Explorer (IE 8 et inférieures), qui peuvent ne pas prendre en charge cet attribut de manière optimale. Si la compatibilité avec ces versions est nécessaire, des alternatives peuvent être envisagées ou des tests spécifiques effectués.
Différences entre HTML 4.01 et HTML5
Aucune.
Par carabde 10 mars 2014