oujood.com

Taille de fenêtre de navigateur en JavaScript

Pour déterminer la taille de la fenêtre du navigateur, utilisez les propriétés innerWidth et innerHeight ou outerWidth et outerHeight
.....

chercher |

Les propriétés Window innerWidth et innerHeight

JavaScript cours tutorial

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

Internet Explorer Firefox Opera Google Chrome Safari

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

Internet Explorer Firefox Opera Google Chrome Safari

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



Voir aussi nos tutoriel :

Balise q

Définit une citation courte

fonction substr_compare, substr_compare

Compare deux chaînes depuis un offset jusqu' une longueur en caractères

:visited

Ajoute un style à un lien visité