js pour obtenir le code d'implémentation de l'élément par rapport à la position de la fenêtre

JS obtient le décalage, le décalage et d'autres propriétés de l'élément

obj.clientwidth // Obtenez la largeur de l'élément

obj.clientheight // La hauteur de l'élément

obj.offsetleft // L'élément par rapport à la gauche de l'élément parent

obj.offsettop // Le haut de l'élément par rapport à l'élément parent

obj.offsetwidth // La largeur de l'élément

obj.offsetheight // la hauteur de l'élément

La différence:

ClientWidth = largeur + rembourrage

ClientHeight = hauteur + rembourrage

OffsetWidth = largeur + rembourrage + bordure

offSetheight = largeur + padding + bordure

Le décalage a plus de largeur de bordure que le client

 // Obtenez la coordonnée horizontale de la fonction élément (par rapport à la fenêtre) getTop (e) {var offset = e.offsetTop; if (e.offsetparent! = null) offset + = getTop (e.offsetparent); return offset;} // Obtenez la coordonnée horizontale de l'élément (par rapport à la fenêtre) Fonction Getleft (e) {var offset = e.offsetleft; if (e.offsetparent! = null) offset + = getleft (e.offsetparent); return décalage;}

J'ai également écrit un article JS sur l'obtention des emplacements des éléments: JS obtient le décalage de l'élément, Offsetleft et d'autres attributs. Nous pouvons obtenir la position de l'élément par rapport à la fenêtre à travers les attributs offsetop et offsetleft, mais les attributs de décalage et de décalage sont tous deux positionnés par rapport à l'élément parent, et les éléments qui ont généralement besoin d'obtenir la position ne sont pas à la couche la plus externe, donc les attributs liés au décalage qui traversent l'élément supérieur ne sont pas accrus. Ensuite, l'efficacité devient un problème.

 // Obtenez la coordonnée horizontale de la fonction élément (par rapport à la fenêtre) getTop (e) {var offset = e.offsetTop; if (e. offsetParent! = Null) offset + = getTop (e.offsetparent); return offset;} // Obtenez la coordonnée horizontale de l'élément (relatif à la fenêtre) Fonction Getleft (e) {var) offset = e.offsetleft; if (e.offsetparent! = null) offset + = getleft (e.offsetparent); return offset;}

Heureusement, le navigateur m'a fourni l'interface correspondante GetBoundingClientRect. Cette méthode est apparue pour la première fois dans le navigateur IE. Les navigateurs ultérieurs ont également soutenu cette méthode, et c'était plus parfait. Dans IE, ils ne peuvent obtenir que les attributs à gauche, en haut, en bas et à droite des éléments, et les navigateurs modernes ultérieurs peuvent également obtenir la largeur et la largeur des éléments.

Il convient de noter ici que le bas est la distance entre le bas de l'élément et le haut de la fenêtre, plutôt que le bas de la position dans CSS par rapport au bas de la fenêtre. De même, l'attribut Rihgt est la distance entre l'élément le plus à droite et le côté gauche de la fenêtre.

 var box = document.getElementById ("box"); var pos = box.getBoundingClientRect (); box.innerhtml = "top:" + pos.top + "Left:" + pos.left + "en bas:" + pos.bottom + "à droite:" + pos.right + "width:" + pos.width + "height:" + pos.heightHeight

Articles originaux, veuillez indiquer la réimpression: réimprimé du développement frontal