Window : propriété innerHeight

Baseline Widely available

Cette fonctionnalité est bien établie et fonctionne sur de nombreux appareils et versions de navigateurs. Elle est disponible sur tous les navigateurs depuis juillet 2015.

La propriété en lecture seule innerHeight de l'interface Window retourne la hauteur intérieure de la fenêtre en pixels, y compris la hauteur de la barre de défilement horizontale, si elle est présente.

La valeur de innerHeight est prise à partir de la hauteur de la disposition de la zone d'affichage de la fenêtre. La largeur peut être obtenue en utilisant la propriété innerWidth.

Valeur

Une valeur entière indiquant la hauteur de la zone d'affichage de la fenêtre en pixels. La propriété est en lecture seule et n'a pas de valeur par défaut.

Pour modifier la hauteur de la fenêtre, appelez l'une de ses méthodes de redimensionnement, telles que resizeTo() ou resizeBy().

Notes d'utilisation

Pour obtenir la hauteur de la fenêtre moins sa barre de défilement horizontale et ses bordures, utilisez plutôt la propriété clientHeight de l'élément racine <html>.

Les deux propriétés innerHeight et innerWidth sont disponibles sur n'importe quelle fenêtre ou tout objet qui se comporte comme une fenêtre, tel qu'un onglet ou un cadre.

Exemples

Sur une collection de cadres

console.log(window.innerHeight); // ou

console.log(self.innerHeight);
// retournera la hauteur de la partie visible du cadre dans frameset

console.log(parent.innerHeight);
// retournera la hauteur de la partie visible du frameset le plus proche

console.log(top.innerHeight);
// retournera la hauteur de la partie visible du frameset le plus éloigné

Pour modifier les dimensions d'une fenêtre, voir window.resizeBy() et window.resizeTo().

Pour récupérer la hauteur extérieure d'une fenêtre, c'est-à-dire la hauteur de la fenêtre du navigateur dans sa totalité, voir window.outerHeight.

<p>
  Redimensionnez la fenêtre du navigateur pour déclencher l'événement
  <code>resize</code>.
</p>
<p>Hauteur de la fenêtre&nbsp;: <span id="height"></span></p>
<p>Largeur de la fenêtre&nbsp;: <span id="width"></span></p>

JavaScript

const heightOutput = document.querySelector("#height");
const widthOutput = document.querySelector("#width");

function updateSize() {
  heightOutput.textContent = window.innerHeight;
  widthOutput.textContent = window.innerWidth;
}

updateSize();
window.addEventListener("resize", updateSize);