Comment obtenir la position des éléments DOM dans JS-js tutoriel-php.cn

Comment obtenir la position des éléments DOM dans JS

php中世界最好的语言

Libérer： 2018-04-27 10:50:13

original

4240 Les gens l'ont consulté

Cette fois je vais vous montrer comment obtenir la position des éléments DOM en JS. Quelles sont les précautions pour obtenir la position des éléments DOM en JS Voici un cas pratique, jetons un oeil. .

Lors du défilement et de l'animation de la page, la position absolue des éléments DOM est souvent obtenue, comme la navigation flottante sur le côté gauche de cet article. Lorsque la page y défile, elle sera rendue dans le document. circuler normalement. Lorsque la page défile au-delà de sa position, elle sera toujours suspendue à gauche.

Cet article détaillera différentes méthodes pour obtenir la position absolue des éléments DOM et la compatibilité correspondante. Pour plus d'informations sur la façon d'obtenir la hauteur de l'élément DOM et la hauteur de défilement, veuillez vous référer à l'article Largeur, hauteur et hauteur de défilement de la fenêtre.

Aperçu

Voici les documents et normes correspondant aux API impliquées dans cet article pour référence :

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 est utilisé pour obtenir la position de l'élément actuel (à l'exclusion de la bordure supérieure) par rapport au conteneur de positionnement. C'est-à-dire que

Si tous les éléments ancêtres sont positionnés statiquement position:static; (c'est la situation par défaut), offsetTop représente la différence de hauteur par rapport au haut du document (le haut du document peut avoir déployé hors de la fenêtre, cette hauteur peut être supérieure à la hauteur de la fenêtre).

S'il existe un ancêtre de position absolue position:absolute/fixed, offsetTop sera relatif à cet élément. Par conséquent, afin d'obtenir la différence de hauteur par rapport au haut du document, vous devez appeler récursivement :

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

Copier après la connexion

el.offsetParent est le conteneur de positionnement de l'élément courant. Si ce n'est pas le cas de l'élément courant. avoir un nœud ancêtre positionné de manière absolue, La valeur de cet attribut est null.

Compatibilité et limitations : Cet attribut est pris en charge par presque tous les navigateurs. Sa valeur est 0 si l'élément est masqué, mais n'a aucun effet dans IE9.

clientTop/clientLeft

Ne vous laissez pas tromper par le nom, Element.clientTop fait référence à la largeur de la bordure supérieure de l'élément courant une valeur entière. Toujours égal à getComputedStyle() Renvoie la valeur de l'attribut border-top-width arrondie à un entier.

Pourquoi ? Dans la terminologie DOM, le client fait toujours référence à la zone de rendu à l'exception de la bordure (padding+taille du contenu). Le décalage fait toujours référence à la zone de rendu contenant la bordure (bordure + remplissage + taille du contenu), et clientTop est la différence entre les deux sommets, c'est-à-dire la largeur de la bordure. Pour le concept de boîtes, veuillez vous référer à : Attribut CSS Display et Modèle de boîte

Compatibilité et limitations : Identique à offsetTop/offsetLeft

. getBoundingClientRect()

Element.getBoundingClientRect() est utilisé pour obtenir la taille de l'élément et sa position par rapport à la fenêtre, et renvoie un objet DOMRect.

> 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

Copier après la connexion

Si vous souhaitez obtenir la position par rapport au coin supérieur gauche du document, vous devez ajouter la position de défilement aux top et left ci-dessus. Le code suivant provient de MDN et est compatible avec presque tous les navigateurs :

// 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

Copier après la connexion

Compatibilité et limitations : c'est également une fonctionnalité du module d'affichage CSSOM, mais il est compatible avec presque tous les navigateurs. Veuillez vous référer à <.>

https://caniuse.com/#feat=getboundingclientrect IE Le coin supérieur gauche de la fenêtre ne peut pas être 0,0 Dans IE9, vous pouvez le définir sur 0,0 comme. ceci :

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

Copier après la connexion

.getClientRects()

Element.getClientRects() est utilisé pour obtenir une collection de DOMRect correspondant à tous les CSS modèles de boîte dans l’élément DOM.

S'il s'agit d'un élément de niveau bloc, il ne doit y avoir qu'un seul élément dans l'ensemble renvoyé, qui correspond à la taille et à la position du bloc. Mais s'il s'agit d'un élément en ligne (ou d'un élément dans un SVG), chaque boîte CSS qu'il contient sera renvoyée. Par exemple, un

ordinaire qui est enveloppé par défaut : <span>

> 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, …}

Copier après la connexion

comporte trois lignes, dont la troisième ligne mesure moins d'une ligne. Chaque saut de ligne forme un nouveau. Boîte CSS. <span>

Compatibilité et limitations : dans IE8 et versions antérieures, l'objet

unique à IE (au lieu de TextRectangle) sera renvoyé. Cet objet n'a pas les attributs ClientRect et width, et ne peut pas lui être attribué. Référence : https://webplatform.github.io/docs/dom/HTMLElement/getClientRects/height

.getComputedStyle()

Fenêtre. getComputedStyle() peut obtenir toutes les propriétés CSS calculées d'un élément. Pour les éléments simples positionnés de manière absolue, la position de l'élément peut être obtenue via les

, top et d'autres valeurs d'attribut renvoyées par cette API. Par exemple : left

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

Copier après la connexion

Il existe également une utilisation utile pour obtenir des informations de style telles que la taille et la position des pseudo-éléments : .getComputedStyle()

// 以下代码来自： 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!'

Copier après la connexion

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

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

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