So ermitteln Sie die absolute Position von DOM-Elementen in der Front-End-Schnittstelle

Dieses Mal zeige ich Ihnen, wie Sie die absolute Position des DOM-Elements in der Front-End-Schnittstelle ermitteln und welche Vorsichtsmaßnahmen Sie beachten müssen, um die absolute Position des DOM-Elements in der Front-End-Schnittstelle zu ermitteln ist ein praktischer Fall, werfen wir einen Blick darauf.

Beim Scrollen und Animieren von Seiten wird häufig die absolute Position von DOM-Elementen ermittelt, z. B. die schwebende Navigation auf der linken Seite dieses Artikels. Wenn die Seite dorthin scrollt, wird sie im Dokument gerendert Normaler Fluss Wenn die Seite darüber hinaus scrollt, wird ihre Position immer auf der linken Seite angehalten.

In diesem Artikel werden verschiedene Methoden zum Ermitteln der absoluten Position von DOM-Elementen und die entsprechende Kompatibilität detailliert beschrieben. Informationen dazu, wie Sie die DOM-Elementhöhe und Scrollhöhe erhalten, finden Sie im Artikel Breite, Höhe und Scrollhöhe des Ansichtsfensters.

Übersicht

Dies sind die Dokumente und Standards, die den in diesem Artikel beteiligten APIs als Referenz entsprechen:

API	用途	文档	标准
offsetTop	相对定位容器的位置	MDN	CSSOM View Module
clientTop	上边框宽度	MDN	CSSOM View Module
.getBoundingClientRect()	元素大小和相对视口的位置	MDN	CSSOM View Module
.getClientRects()	所有子 CSS 盒子的大小和位置	MDN	CSSOM View Module
.getComputedStyle()	应用所有样式表和计算之后的 CSS 属性	MDN	DOM Level 2 Style CSSOM

offsetTop/offsetLeft

HTMLElement.offsetTop wird verwendet, um die Position des aktuellen Elements (mit Ausnahme des oberen Rands) relativ zum Positionierungscontainer abzurufen. Das heißt,

Wenn alle Vorgängerelemente statisch positioniert sind position:static; (dies ist die Standardsituation), stellt offsetTop den Höhenunterschied vom oberen Rand des Dokuments dar (der obere Rand des Dokuments kann sein). Aus dem Ansichtsfenster herausgerollt, kann diese Höhe größer als die Höhe des Ansichtsfensters sein.

Wenn es ein absolut positioniertes Vorgängerelement position:absolute/fixed gibt, ist offsetTop relativ zu diesem Element. Um den Höhenunterschied relativ zum oberen Rand des Dokuments zu erhalten, müssen Sie daher rekursiv aufrufen:

function getOffsetTop(el){
 return el.offsetParent
  ? el.offsetTop + getOffsetTop(el.offsetParent)
  : el.offsetTop
}

el.offsetParent ist der Positionierungscontainer des aktuellen Elements Absolut positionierter Vorfahrenknoten, dieses Attribut Der Wert ist null.

Kompatibilität und Einschränkungen: Dieses Attribut wird von fast allen Browsern unterstützt. Sein Wert ist 0, wenn das Element ausgeblendet ist, hat aber im IE9 keine Auswirkung.

clientTop/clientLeft

Lassen Sie sich nicht vom Namen täuschen, Element.clientTop bezieht sich auf die Breite des oberen Randes des aktuellen Elements ein ganzzahliger Wert. Immer gleich getComputedStyle() Gibt den Wert des Attributs border-top-width zurück, gerundet auf eine Ganzzahl.

Warum? In der DOM-Terminologie bezieht sich „Client“ immer auf die Rendering-Box (Auffüllung + Inhaltsgröße) ohne Rand. Der Versatz bezieht sich immer auf das Rendering-Feld, das den Rand enthält (Rand + Innenabstand + Inhaltsgröße), und clientTop ist die Differenz zwischen den beiden Oberteilen, also die Randbreite. Informationen zum Konzept von Boxen finden Sie unter: CSS-Anzeigeattribut und Boxmodell

Kompatibilität und Einschränkungen: Gleich wie offsetTop/offsetLeft

.getBoundingClientRect()

Element.getBoundingClientRect() wird verwendet, um die Größe des Elements und seine Position relativ zum Ansichtsfenster abzurufen, und gibt ein DOMRect-Objekt zurück.

> document.querySelector('span').getBoundingClientRect()
DOMRect {x: 2.890625, y: 218.890625, width: 1264, height: 110, top: 218.890625, …}
bottom: 328.890625
height: 110
left: 2.890625
right: 1266.890625
top: 218.890625
width: 1264
x: 2.890625
y: 218.890625

Wenn Sie die Position relativ zur oberen linken Ecke des Dokuments erhalten möchten, müssen Sie die Bildlaufposition zu den obigen top und left hinzufügen. Der folgende Code stammt von MDN und ist mit fast allen Browsern kompatibel:

// For scrollX
(((t = document.documentElement) || (t = document.body.parentNode))
 && typeof t.scrollLeft == 'number' ? t : document.body).scrollLeft
// For scrollY
(((t = document.documentElement) || (t = document.body.parentNode))
 && typeof t.scrollTop == 'number' ? t : document.body).scrollTop

Kompatibilität und Einschränkungen: Es ist auch eine Funktion des CSSOM View Module, aber es ist mit fast allen Browsern kompatibel. Bitte beachten Sie

https://caniuse.com/#feat=getboundingclientrect Die obere linke Ecke des Fensters unter IE ist möglicherweise nicht 0,0. In IE9 kann sie wie folgt auf 0,0 gesetzt werden:

<meta http-equiv="x-ua-compatible" content="ie=edge"/>

.getClientRects()

Element.getClientRects() wird verwendet, um eine Sammlung von DOMRect zu erhalten, die allen CSS-Boxmodellen im DOM-Element entspricht.

Wenn es sich um ein Element auf Blockebene handelt, sollte es nur ein Element in der zurückgegebenen Menge geben, nämlich die Größe und Position des Blocks. Wenn es sich jedoch um ein Inline-Element (oder ein Element innerhalb einer SVG-Datei) handelt, wird jedes darin enthaltene CSS-Feld zurückgegeben. Zum Beispiel ein gewöhnliches <span>, das standardmäßig umbrochen ist:

> document.querySelector('span').getClientRects()
DOMRectList {0: DOMRect, 1: DOMRect, 2: DOMRect, length: 5}
0: DOMRect {x: 2.890625, y: 262.890625, width: 1264, height: 22, top: 262.890625, …}
1: DOMRect {x: 2.890625, y: 284.890625, width: 1264, height: 22, top: 284.890625, …}
2: DOMRect {x: 2.890625, y: 306.890625, width: 768, height: 22, top: 306.890625, …}

Dieses <span> hat drei Zeilen, von denen die dritte Zeile weniger als eine Zeile lang ist. Jeder Zeilenumbruch bildet ein neues CSS-Feld .

Kompatibilität und Einschränkungen: In IE8 und niedriger wird das IE-einzigartige TextRectangle-Objekt (anstelle von ClientRect) zurückgegeben. Dieses Objekt verfügt nicht über die Attribute width und height Es können keine Eigenschaften festgelegt werden. Referenz: https://webplatform.github.io/docs/dom/HTMLElement/getClientRects/

.getComputedStyle()

Fenster. getComputedStyle() kann alle berechneten CSS-Eigenschaften eines Elements abrufen. Bei einfachen absolut positionierten Elementen kann die Position des Elements über top, left und andere von dieser API zurückgegebene Attributwerte ermittelt werden. Zum Beispiel:

let btn = document.querySelector('#btn-scroll-up')
let {top, left} = getComputedStyle(btn)
console.log('top:', top, 'left:', left)

.getComputedStyle() Es gibt auch eine nützliche Verwendung, um Stilinformationen wie die Größe und Position von Pseudoelementen abzurufen:

// 以下代码来自： https://developer.mozilla.org/en-US/docs/Web/API/Window/getComputedStyle
var h3 = document.querySelector('h3'); 
var result = getComputedStyle(h3, ':after').content;
console.log('the generated content is: ', result); // returns ' rocks!'

Kompatibilität und Einschränkungen: .getComputedStyle() Kompatibel mit fast Alle Browser finden Sie unter https://caniuse.com/#search=getComputedStyle. Der zurückgegebene Wert ist jedoch eine CSS-Eigenschaft. Wenn Sie damit die absolute Position ermitteln, sollten Sie auf den Typ des Werts achten. Beispielsweise kann left ein absoluter Wert wie 13px oder ein CSS-Schlüsselwort wie auto sein.

Zusammenfassung: Um die Position eines DOM-Elements relativ zum Dokument zu ermitteln, können Sie offsetTop direkt verwenden, um die Position eines DOM-Elements relativ zum Ansichtsfenster abzurufen. Sie können .getBoundingClientRect() verwenden, um das CSS abzurufen Box eines SVG-Elements oder Inline-Elements (z. B. zum Hervorheben von Text) können Sie .getClientRects() verwenden, um die nachträglich gerenderten CSS-Eigenschaften von absolut positionierten Elementen und Pseudoelementen abzurufen .getComputedStyle()

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben, und es werden noch weitere Artikel auf der chinesischen PHP-Website folgen.

Empfohlene Lektüre:

JS-Try-Catch-Anweisung und Verwendung von Fehlertypen

So übertragen Sie Konfigurationsdaten vom Code Center Trennung

Das obige ist der detaillierte Inhalt vonSo ermitteln Sie die absolute Position von DOM-Elementen in der Front-End-Schnittstelle. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!