Maison  >  Article  >  interface Web  >  js obtient les différentes largeurs et hauteurs du navigateur et de l'écran

js obtient les différentes largeurs et hauteurs du navigateur et de l'écran

高洛峰
高洛峰original
2017-02-23 17:15:072154parcourir

1 : Largeur et hauteur de la zone visible de la page Web, hors barres d'outils et barres de défilement (taille de la zone visible de la fenêtre du navigateur)

1. Pour IE9, chrome, firefox, Opera, Safari :

window.innerHeight La hauteur intérieure de la fenêtre du navigateur ; window.innerWidth La largeur intérieure de la fenêtre du navigateur ;

2 Pour IE8.7.6.5 :document.documentElement.clientHeight : Indique la hauteur actuelle de la fenêtre où se trouve le document HTML ;

document.documentElement.clientWidth : Indique la largeur actuelle de la fenêtre où se trouve le document HTML

Ou, car le body de l'objet document correspond à la balise 6c04bd5ca3fcae76e30b72ad730ca86d du document HTML, il peut également être exprimé comme :

document.body.clientHeight : Représente la hauteur actuelle de la fenêtre où se trouve le document HTML. found;

document.body.clientWidth : Représente la largeur actuelle de la fenêtre où se trouve le document HTML

Conclusion : document.body.clientWidth/Height : La largeur et la hauteur sont trop petites, et la hauteur est même par défaut de 200

document.documentElement.clientWidth/Height et window La largeur et la hauteur de .innerWidth ; /Hauteur sont toujours égales.

Donc la solution Javascripit qui est pratique dans différents navigateurs :

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

2 : Texte complet largeur et hauteur du page Web

scrollWidth et scrollHeight obtiennent la hauteur et la largeur du contenu de la page Web

Pour IE.Opera :

scrollHeight. est la hauteur réelle du contenu de la page Web, qui peut être inférieure à clientHeight ;

2 Pour NS.firefox :

scrollHeight est la hauteur du contenu Web, mais la valeur minimale est clientHeight ; c'est-à-dire que la hauteur réelle du contenu Web est inférieure à clientHeight Quand, scrollHeight renvoie clientHeight

3. Code de compatibilité du navigateur :

var w = document.documentElement.scrollWidth || document.body.scrollWidth;
var h = document.documentElement.scrollHeight || document.body.scrollHeight;

2 : La largeur et la hauteur de la zone visible de la page Web, y compris les barres de défilement et autres bords (changera avec la taille d'affichage de la fenêtre)

1. Valeur :

offsetWidth = scrollWidth bordures gauche et droite des barres de défilement gauche et droite. ; offsetHeight = scrollHeight bordures supérieure et inférieure des barres de défilement supérieure et inférieure

2. 🎜>

3 : La distance et le décalage de la page Web défilée

var w = document.documentElement.offsetWidth || document.body.offsetWidth ;
var h = document.documentElement.offsetHeight || document.body.offsetHeight ;

1.scrollLeft :

Définissez ou obtenez la distance entre le bord gauche de l'objet donné et l'extrémité la plus à gauche du contenu actuellement visible dans la fenêtre

2.scrollTop : Définissez ou obtenez la distance entre le haut de l'objet donné et l'extrémité la plus à gauche du contenu actuellement visible dans la fenêtre

3.offsetLeft :Définir ou obtenir la position gauche calculée de l'objet donné par rapport à la disposition ou aux coordonnées parent spécifiées par la propriété offsetParent

4.offsetTop :

Définir ou obtenir ; Positionné à la position supérieure calculée de l'objet donné par rapport à la mise en page ou aux coordonnées parent spécifiées par la propriété offsetParent

Plus js Obtenez différentes largeurs et hauteurs de navigateurs et d'écrans ; faites attention au site Web PHP chinois !

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn