Zusammenfassung der js-Methoden zum Ermitteln des Offsets eines Elements in den page_javascript-Fähigkeiten

Wenn wir js zum Erstellen von Effekten verwenden, müssen wir häufig den Versatz eines Elements auf der Seite ermitteln (z. B. die Funktion „Tipp-Eingabeaufforderungsfeld“). Um den Versatz zu erhalten, können Sie den Versatz relativ zum Dokument direkt erhalten, oder Sie können den Versatz relativ zum Ansichtsfenster (Ansichtspunkt) plus den Seiten-Scroll-Betrag (Bildlauf) erhalten.

1. Ermitteln Sie den Offset relativ zum Dokument

function getOffsetSum(ele){
  var top= 0,left=0;
  while(ele){
    top+=ele.offsetTop;
    left+=ele.offsetLeft;
    ele=ele.offsetParent;
  }
  return {
    top:top,
    left:left
  }
}

Durch Iterieren von offsetParent nach oben kann der Versatz relativ zum Dokument berechnet werden, also der Versatz relativ zur Seite.

Probleme mit dieser Methode:

1) Bei Seiten, die Tabellen- und Inline-Frame-Layouts verwenden, sind die erhaltenen Ergebnisse aufgrund der Unterschiede in der Art und Weise, wie verschiedene Browser Elemente implementieren, ungenau.

2) Jedes Mal, wenn Sie eine Ebene nach der anderen nach offsetParent suchen müssen, ist die Effizienz zu gering.

2. Ermitteln Sie den Versatz relativ zum Ansichtsfenster (Ansichtspunkt) plus den Bildlaufbetrag (Bildlauf) der Seite

function getOffsetRect(ele){
      var box=ele.getBoundingClientRect();
      var body=document.body,
        docElem=document.documentElement;
      //获取页面的scrollTop,scrollLeft(兼容性写法)
      var scrollTop=window.pageYOffset||docElem.scrollTop||body.scrollTop,
        scrollLeft=window.pageXOffset||docElem.scrollLeft||body.scrollLeft;
      var clientTop=docElem.clientTop||body.clientTop,
        clientLeft=docElem.clientLeft||body.clientLeft;
      var top=box.top+scrollTop-clientTop,
        left=box.left+scrollLeft-clientLeft;
      return {
        //Math.round 兼容火狐浏览器bug
        top:Math.round(top),
        left:Math.round(left)
      }
    }

Diese Methode erhält direkt den Versatz relativ zum Ansichtsfenster über die Methode getBoundingClientRect(), plus den Bildlaufumfang der Seite, minus clientTop, clientLeft (IE8 und niedrigere Browser verwenden (2,2) als Startpunktkoordinaten, also Sie müssen die Startpunktkoordinate vom Wert subtrahieren. Andere Browser verwenden (0,0) als Startpunktkoordinate.

Die getBoundingClientRect()-Methode unterstützt IE, ff3, Safari4, Orear9,5, Chrome.

3. Kompatibilitätsschreiben

//获取元素相对于页面的偏移
function getOffset(ele){
  if(ele.getBoundingClientRect){
    return getOffsetRect(ele);
  }else{
    return getOffsetSum(ele);
  }
}

Verwenden Sie für Browser, die die Methode getBoundingClientRect() unterstützen, die Methode getOffsetRect() und für Browser, die sie nicht unterstützen, die Methode getOffsetSum().

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, er wird für alle hilfreich sein, die Javascript lernen.