Comment calculer avec précision la hauteur du document en JavaScript dans les navigateurs ?

Calcul de la hauteur d'un document en JavaScript : résolution des problèmes de compatibilité

La détermination de la hauteur d'un document est cruciale pour divers scénarios, tels que le positionnement absolu des éléments . Cependant, certains documents posent des problèmes, entraînant des écarts ou des valeurs incorrectes lors de l'utilisation de méthodes standard.

Deux cas problématiques sont Fandango et Paper Swap :

• Sur Fandango, $(document). height() renvoie la valeur correcte, tandis que document.height et document.body.scrollHeight sont tous deux 0.
• Lors de l'échange de livres brochés, $(document).height() renvoie une erreur et document.height et document.body.scrollHeight renvoient des valeurs incorrectes.

La raison de ces incohérences réside dans le fait que différents navigateurs calculent le document. taille différemment. Pour résoudre ce problème, il est nécessaire d'utiliser la formule suivante :

var body = document.body,
    html = document.documentElement;

var height = Math.max( body.scrollHeight, body.offsetHeight, 
                       html.clientHeight, html.scrollHeight, html.offsetHeight );

Cette approche garantit que la valeur de hauteur la plus élevée est obtenue, quel que soit le navigateur utilisé.

Il est important Il convient de noter que tester la hauteur du document avant qu'il ne soit complètement chargé entraînera toujours une valeur de 0. De plus, toute modification ultérieure du document ou du redimensionnement de la fenêtre peut nécessiter un recalcul de la hauteur. Pour gérer de tels scénarios, utilisez les événements onload ou document ready.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!