So ermitteln Sie die Position von DOM-Elementen in JS

Dieses Mal zeige ich Ihnen, wie Sie die Position von DOM-Elementen in JS ermitteln. Was sind die Vorsichtsmaßnahmen, um die Position von DOM-Elementen in JS zu ermitteln? .

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 einen Vorfahren von absolut positioniertem position:absolute/fixed gibt, wird offsetTop relativ zu diesem Element sein. 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 ganze Zahl.

Warum? In der DOM-Terminologie bezieht sich „Client“ immer auf die Rendering-Box mit Ausnahme des Randes (Padding+Inhaltsgröße). 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 Box-Modell

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 IE Die obere linke Ecke des Fensters ist möglicherweise nicht 0,0. In IE9 können Sie sie wie folgt auf 0,0 setzen:

<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 entspricht DOM-Element.

Wenn es sich um ein Element auf Blockebene handelt, sollte der zurückgegebene Satz nur ein Element enthalten, 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!'

兼容性和限制：.getComputedStyle() 几乎兼容所有浏览器，可参考 https://caniuse.com/#search=getComputedStyle。但它返回的值是 CSS 属性，用它获取绝对位置时要注意值的类型。例如 left 可能是 13px 这样的绝对值，也可能是 auto 这样的 CSS 关键字。

总结 获取 DOM 元素相对于文档的位置，可以直接使用 offsetTop； 获取 DOM 元素相对于视口的位置，可以使用 .getBoundingClientRect()； 获取 SVG 元素或行内元素的 CSS 盒子（比如用来做文本高亮时），可以使用 .getClientRects()； 获取绝对定位元素、伪元素的渲染后 CSS 属性，可以使用 .getComputedStyle()

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

推荐阅读：

Angular4性能优化方法总结

jQuery+ajax动态操作表格tr td步骤详解

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