Groupes les en-têtes (H1 à H6) des éléments
Les propriétés Window innerWidth et innerHeight
JavaScript cours tutorialQuestion : Comment déterminer la taille de fenêtre de navigateur en JavaScript ?
Réponse : Pour déterminer la taille de la fenêtre du navigateur, utilisez les propriétés innerWidth et innerHeight
Définition et utilisation des propriétés innerWidth et innerHeight
La propriété InnerWidth définit ou retourne la largeur intérieure de la zone de contenu de la fenêtre.
La propriété InnerHeight définit ou retourne la hauteur intérieure de la zone de contenu de la fenêtre.
Remarque : Utilisez les propriétés outerWidth et outerHeight pour obtenir la largeur/hauteur avec barres d'outils et barres de défilement.
Syntaxe
Pour obtenir la largeur et la hauteur:
window.innerWidth
window.innerHeight
Pour définir la largeur et la hauteur:
window.innerWidth=nombre en pixels
window.innerHeight= nombre en pixels
Appui de navigateur
Les propriétés InnerWidth et InnerHeight sont prises en charge dans tous les principaux navigateurs.
Remarque : Ces propriétés ne sont pas supportées dans IE8 et versions antérieures.
Exemple Obtenir la hauteur et la largeur de la fenêtre: (non compris les barres d'outils/barres de défilement) :
Exemple : Copier le code
<!doctype html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Exemple obtenir la largeur et la hauteur
de la fenêtre</title>
</head>
<body>
<p id="dmo">Cliquez sur le bouton pour afficher cette
fenêtre hauteur et largeur (sans compter les barres d'outils et
barres de défilement).</p>
<button onclick="maFonction()"> Voir </button>
<script>
function maFonction()
{
var w=window.innerWidth;
var h=window.innerHeight;
txt=document.getElementById("dmo");
txt.innerHTML="La largeur de cette fenêtre est : " + w + " et sa
hauteur est : " + h;
}
</script>
</body>
</html>
Astuce :
(1) Si le code ci-dessus s'exécute dans une frame ou iframe, il vous donnera la largeur et la hauteur du cadre(frame ou iframe).
(2) Pour IE8 et versions antérieurs on utilise document.body.offsetWidth et document.body.offsetHeight doit être exécuté après que le navigateur aie analysé la balise <BODY>.
(3) Si l'utilisateur redimensionne la fenêtre du navigateur, vous devriez régénérer la largeur et la hauteur (utiliser window.onresize pour faire).
(4) De la même façon, si l'utilisateur effectue un zoom avant (ou arrière) vous devriez également recalculer la largeur et la hauteur.
Les propriétés window outerWidth et outerHeight
Définition et utilisation des propriétés outerWidth et outerHeight
La propriété outerWidth définit ou retourne la largeur extérieure d'une fenêtre, y compris tous les éléments de l'interface (comme les barres d'outils et barres de défilement).
La propriété outerHeight définit ou retourne la hauteur extérieure d'une fenêtre, y compris tous les éléments de l'interface (comme les barres d'outils et barres de défilement).
Remarque : Utilisez les propriétés innerWidth et innerHeight pour obtenir la largeur/hauteur sans les barres d'outils/barres de défilement.
Syntaxe
Pour obtenir la hauteur et largeur:
window.outerWidth
window.outerHeight
Pour définir la hauteur et largeur:
window.outerWidth= nbr en pixels
window.outerHeight=nbr en pixels
Appui de navigateur
Les propriétés outerWidth et outerHeight sont prises en charge dans tous les principaux navigateurs.
Remarque : Ces propriétés ne sont pas supportées dans IE8 et versions antérieures.
Exemple Obtenir la hauteur et la largeur de la fenêtre: (y compris les barres d'outils et barres de défilement) :
Exemple : Copier le code
<!doctype html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Exemple obtenir la largeur et la hauteur
de la fenêtre</title>
</head>
<body>
<p id="dmo">Cliquez sur le bouton pour afficher cette
fenêtre hauteur et largeur (y compris les barres d'outils et
barres de défilement).</p>
<button onclick="maFonction()"> Voir </button>
<script>
function maFonction()
{
var w=window.outerWidth;
var h=window.outerHeight;
document.getElementById("dmo").innerHTML="La largeur de cette
fenêtre est : " + w + " et sa hauteur est : " + h;
}
</script>
</body>
</html>
Par carabde 30 mars 2014