Maison > interface Web > js tutoriel > le corps du texte

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

高洛峰
Libérer: 2017-02-23 17:15:07
original
2174 Les gens l'ont consulté

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 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;
Copier après la connexion

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;
Copier après la connexion

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 ;
Copier après la connexion

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 !

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
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
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal