Résumé des méthodes d'obtention de la hauteur et de la largeur et de l'emplacement des pages Web dans JS

objet d'écran

Obtenez la hauteur et la largeur de l'écran (résolution)

 Screen.Width // Wide Screen.Height // High Screen.AvailWidth // L'écran peut être utilisé pour soustraire la valeur après la hauteur du composant système.AvailHeight // L'écran peut être utilisé pour soustraire la largeur des pixels du composant système.

objet de fenêtre

Obtenez la position et la taille de la fenêtre

 window.screentop // La distance entre le haut de la fenêtre vers le haut de l'écran Window.Screenleft // La distance entre le côté gauche de la fenêtre vers le côté gauche de la fenêtre de l'écran.innerwidth // la largeur du point de vue dans l'alerte de la fenêtre (Window.innerWidth); // Chrome 1366 FF 1366 IE 1366 Window.innerHeight // La hauteur du point de vue dans la fenêtre Cette valeur est liée à des facteurs tels que le navigateur affiche la barre de menu, etc. Alerte (Window.InnerHeight); // Chrome 643 FF 657 IE 673window.outerWidth // La largeur de la fenêtre du navigateur lui-même (largeur de zone visible + largeur de bordure du navigateur) (fenêtre.outerwidth); // Chrome 1366 FF 1382 IE 1382 // indique que lorsque le chrome est maximisé, la fenêtre du navigateur n'a pas de largeur de bordure, et lorsqu'elle n'est pas maximisée, il y a une largeur de bordure de 8px // ff et c'est-à-dire vers le haut, vers le bas et la fenêtre droite. // Chrome 728 FF 744 IE 744

objet élémentaire

Avant d'introduire les différentes hauteurs et largeurs des objets d'élément, il est nécessaire d'expliquer le modèle de boîte.

box-sizing:content-box;

 BoxWidth = 2 * marge + 2 * Border + 2 * Padding + WidThboxHeight = 2 * marge + 2 * Border + 2 * Padding + Hauteur

Quand aucune barre de défilement n'apparaît

 Body {margin: 0;} # Demo {width: 100px; hauteur: 100px; rembourrage: 10px; Border: 20px; marge: 30px; Color en arrière-plan: rouge;} <div id = "Demo"> 123456789 123456789 </div>

ClientWidth: renvoie la largeur visible du contenu de la page (à l'exclusion des frontières, des marges ou des barres de défilement)

ClientHeight: renvoie la hauteur visible du contenu sur la page (à l'exclusion des frontières, des marges ou des barres de défilement)

 ClientWidth = 2 * Padding + Width - ScrollBarWidth Console.log (document.getElementById («Demo»). ClientWidth); // 120 à ce moment ScrollBarWidth = 0ClientHeight = 2 * Padding + Height - ScrollBarHeight Console.log (document.getElementById ('Demo'). ClientHeight); // 120 à ce moment ScrollBarWidth = 0

Offsetwidth: renvoie la largeur de l'élément, y compris la bordure et le remplissage, mais n'inclut pas les marges

Offsetheight: renvoie la hauteur de l'élément, y compris les frontières et les remplies, mais n'inclut pas les marges

 OffsetWidth = 2 * Border + 2 * Padding + Width Console.log (document.getElementById ('Demo'). OffsetWidth) // 160OffSetheight = 2 * Border + 2 * PADDING + HEEGHT Console.log (Document.getElementById ('Demo').

Offsetleft: obtient la position gauche calculée de l'objet par rapport à la disposition ou à la coordonnée parent spécifiée par la propriété Offsetleft.

Offsettop: obtient la position supérieure calculée de l'objet par rapport à la disposition ou à la coordonnée parent spécifiée par la propriété Offsettop

 console.log (document.getElementById ('Demo'). OffsetLeft) //30Console.log(Document.getElementyid('demo').offsettop) // 30

Quand une barre de défilement apparaît

 corps {marge: 0; rembourrage: 20px; Largeur: 1000px; Hauteur: 500px;} <div id = "Demo"> 123456789123456789 </div>

ScrollWidth: Renvoie toute la largeur de l'élément (y compris les lieux cachés avec des barres de défilement)

ScrollHeight: Renvoie la hauteur de l'élément entier (y compris les lieux cachés avec des barres de défilement)

 ScrollWidth = 2 * Padding + Width Console.log (document.body.scrollwidth) // 1040ScrollHeight = 2 * Padding + Width Console.log (document.body.scrollHeight) // 540

Scrolltop: la hauteur du contenu caché de l'élément lors du glissement du bloc de défilement. Lorsqu'il n'est pas défini, la valeur par défaut est 0 et sa valeur change à mesure que le bloc de défilement défile

Scrollleft: la largeur du contenu caché de l'élément lors du glissement du bloc de défilement vers la droite. Lorsqu'il n'est pas défini, la valeur par défaut est 0 et sa valeur change à mesure que le bloc de défilement défile

objet de l'événement

L'objet d'événement représente l'état d'un événement, tel que l'élément dans lequel l'événement se produit, l'état de la clé du clavier, la position de la souris et l'état du bouton de la souris.

event.Pagex: par rapport aux coordonnées de toute la page, le coin supérieur gauche de la page est la distance horizontale de l'origine de la coordonnée au point où se trouve la souris (IE8 ne le prend pas en charge)

event.pagey: par rapport aux coordonnées de toute la page, le coin supérieur gauche de la page est la distance verticale de l'origine de la coordonnée au point où la souris est située (IE8 ne le prend pas en charge)

event.clientx: les coordonnées de la zone visuelle relative, en utilisant le coin supérieur gauche de la zone visuelle du navigateur comme distance horizontale de l'origine des coordonnées au point où la souris est située, en utilisant le coin supérieur gauche de la zone visuelle du navigateur comme distance horizontale de l'origine des coordonnées au point où la souris est située

Event.Clienty: les coordonnées de la zone visuelle relative, en utilisant le coin supérieur gauche de la zone visuelle du navigateur comme distance verticale entre l'origine des coordonnées et le point où se trouve la souris, en utilisant le coin supérieur gauche de la zone visuelle du navigateur comme distance verticale de la coordonnée d'origine au point au point où la souris est située

event.Screenx: par rapport aux coordonnées de l'écran de l'ordinateur, la distance horizontale entre l'origine des coordonnées et le point où la souris est située, en utilisant le coin supérieur gauche de l'écran comme distance horizontale de la coordonnée du point d'origine au point où la souris est située

Event.Screeny: par rapport aux coordonnées de l'écran de l'ordinateur, la distance verticale entre l'origine des coordonnées et le point où se trouve la souris, en utilisant le coin supérieur gauche de l'écran comme distance verticale de l'origine coordonnée au point où la souris est située

event.offsetx: par rapport à ses propres coordonnées, la distance horizontale de l'origine coordonnée du coin supérieur gauche de son propre rembourrage au point où la souris est située est basée sur sa distance horizontale de l'origine coordonnée des coordonnées au point où la souris est située

Event.Offsety: par rapport à ses propres coordonnées, la distance horizontale de l'origine coordonnée du coin supérieur gauche de son propre rembourrage au point où la souris est située est basée sur sa distance horizontale de l'origine des coordonnées.

Résumer

Ce qui précède est un résumé des méthodes d'obtention de différentes hauteurs et positions de pages Web dans JS, ce qui confère à tout le monde lors de l'apprentissage de JS. Les amis dans le besoin peuvent y faire référence.