Comment obtenir la hauteur et la largeur du document sans utiliser jquery

Comment obtenir la hauteur et la largeur du document en pur javascript c'est à dire sans utiliser jquery.
Je connais $(document).height()et $(document).width(), mais je veux faire ça enjavascript.

Je voulais dire la hauteur et la largeur de la page.

var height = document.body.clientHeight;
var width = document.body.clientWidth;

Vérifiez: cet article pour une meilleure explication.

Même le dernier exemple donné sur http://www.howtocreate.co.uk/tutorials/javascript/browserwindow ne fonctionne pas en mode Quirks. Plus facile à trouver que je ne le pensais, cela semble être la solution (extraite du dernier code jquery):

Math.max(
    document.documentElement["clientWidth"],
    document.body["scrollWidth"],
    document.documentElement["scrollWidth"],
    document.body["offsetWidth"],
    document.documentElement["offsetWidth"]
);

remplacez simplement Largeur par "Hauteur" pour obtenir la hauteur.

Il s'agit d'une solution multi-navigateurs:

var w = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
var h = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;

Vous devez utiliser getBoundingClientRectcomme cela fonctionne généralement avec un navigateur croisé et vous donne une précision sous-pixel sur le rectangle des limites.

elem.getBoundingClientRect()

Obtenez la taille du document sans jQuery

document.documentElement.clientWidth
document.documentElement.clientHeight

Et utilisez ceci si vous avez besoin de la taille de l'écran

screen.width
screen.height

Vous pouvez également essayer:

document.body.offsetHeight
document.body.offsetWidth

Cela devrait fonctionner pour tous les navigateurs / appareils:

function getActualWidth()
{
    var actualWidth = window.innerWidth ||
                      document.documentElement.clientWidth ||
                      document.body.clientWidth ||
                      document.body.offsetWidth;

    return actualWidth;
}

Si vous souhaitez obtenir toute la largeur de la page, y compris le débordement, utilisez document.body.scrollWidth.

Comment connaître très facilement la largeur et la hauteur du document?

en HTML
<span id="hidden_placer" style="position:absolute;right:0;bottom:0;visibility:hidden;"></span>

en javascript

     var c=document.querySelector('#hidden_placer');

     var r=c.getBoundingClientRect();
     r.right=document width
     r.bottom=document height`

Vous pouvez le mettre à jour à chaque événement de redimensionnement de fenêtre, si nécessaire.

windowest la fenêtre d'application entière du navigateur. documentest la page Web affichée qui est réellement chargée.

window.innerWidthet window.innerHeightprendra en compte les barres de défilement qui peuvent ne pas être ce que vous voulez.

document.documentElementest la page Web complète sans la barre de défilement supérieure. document.documentElement.clientWidthrenvoie la taille de la largeur du document sans barre de défilement y. document.documentElement.clientHeightrenvoie la taille de la hauteur du document sans la barre de défilement x.