js-Implementierungscode, um Elemente relativ zur Fensterposition zu erhalten_Javascript-Fähigkeiten

JS ruft die Attribute offsetTop, offsetLeft und andere Elemente des Elements ab

obj.clientWidth //Die Breite des Elements abrufen

obj.clientHeight //Die Höhe des Elements
obj.offsetLeft //Die linke Seite
des Elements relativ zum übergeordneten Element obj.offsetTop //Die Oberseite
des Elements relativ zum übergeordneten Element obj.offsetWidth //Breite des Elements
obj.offsetHeight //Höhe des Elements

Unterschied:

clientWidth = Breitenpolsterung
clientHeight = Höhenpolsterung
offsetWidth = Breite des Auffüllrahmens
offsetHeight = Breite des Auffüllrahmens
Der Versatz ist größer als die Breite des Rahmens

//获取元素的纵坐标（相对于窗口）
function getTop(e){
  var offset=e.offsetTop;
  if(e.offsetParent!=null) offset+=getTop(e.offsetParent);
  return offset;
}
//获取元素的横坐标（相对于窗口）
function getLeft(e){
  var offset=e.offsetLeft;
  if(e.offsetParent!=null) offset+=getLeft(e.offsetParent);
  return offset;
}

Ich habe auch schon einmal einen Artikel über das Ermitteln der Position von Elementen in JS geschrieben: JS ruft die Attribute offsetTop, offsetLeft und andere des Elements ab. Wir können die Position des Elements relativ zum Fenster über die Attribute offsetTop und offsetLeft ermitteln , aber die Attribute offsetTop und offsetLeft sind relativ zu Das übergeordnete Element ist positioniert, und normalerweise befinden sich die Elemente, die die Position erhalten müssen, nicht in der äußersten Ebene, daher ist es unerlässlich, die offsetbezogenen Attribute des übergeordneten Elements zu durchlaufen. Dann wird Effizienz zum Problem.

//获取元素的纵坐标（相对于窗口）
function getTop(e){
var offset=e.offsetTop;
if(e.offsetParent!=null) offset+=getTop(e.offsetParent);
return offset;
}
//获取元素的横坐标（相对于窗口）
function getLeft(e){
var offset=e.offsetLeft;
if(e.offsetParent!=null) offset+=getLeft(e.offsetParent);
return offset;
}

Glücklicherweise stellte mir der Browser die entsprechende Schnittstelle getBoundingClientRect zur Verfügung. Diese Methode erschien zuerst im IE-Browser, und spätere Browser unterstützten diese Methode, und sie kann nur die Elementattribute links, oben und unten abrufen , und rechts, und spätere moderne Browser können auch die Breite und

des Elements ermitteln.

Chrome	Firefox (Gecko)	Internet Explorer	Opera	Safari
1.0	3.0 (1.9)	4.0	(Yes)	4.0

Hier ist zu beachten, dass „bottom“ der Abstand zwischen dem unteren Rand des Elements und dem oberen Rand des Fensters ist, nicht der untere Rand der Position in CSS relativ zum unteren Rand des Fensters. Ebenso ist das rihgt-Attribut der Abstand zwischen dem äußersten rechten Teil des Elements und der linken Seite des Fensters.

var box = document.getElementById("box");
var pos = box.getBoundingClientRect();
box.innerHTML = "top:"+pos.top +
  "left:"+pos.left +
  "bottom:"+pos.bottom +
  "right:"+pos.right +
  "width:"+pos.width +
  "height:"+pos.height

Originalartikel, bitte beim Nachdruck angeben: Nachdruck aus der Frontend-Entwicklung