Comment obtenir la position absolue des éléments DOM dans l'interface frontale

Cette fois, je vais vous montrer comment obtenir la position absolue de l'élément DOM dans l'interface frontale, et quelles sont les précautions à prendre pour obtenir la position absolue de l'élément DOM dans l'interface frontale. Ici. est un cas pratique, jetons-y un coup d'œil.

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 élément ancêtre positionné de manière 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
}

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 (remplissage + taille du contenu) à l'exclusion de la bordure. 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

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

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 Le coin supérieur gauche de la fenêtre dans IE ne peut pas être 0,0 Dans IE9, il peut être défini sur 0,0 comme ceci :

.

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

. getClientRects()

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

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

Ce

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)

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!'

Compatibilité et limitations :

Presque compatible avec tous les navigateurs, veuillez vous référer à https://caniuse.com/#search=getComputedStyle. Mais la valeur qu'il renvoie est une propriété CSS. Lorsque vous l'utilisez pour obtenir la position absolue, vous devez faire attention au type de la valeur. Par exemple, .getComputedStyle() peut être une valeur absolue comme left ou un mot-clé CSS comme 13px. auto

Résumé : Pour obtenir la position d'un élément DOM par rapport au document, vous pouvez utiliser offsetTop directement ; pour obtenir la position d'un élément DOM par rapport à la fenêtre, vous pouvez utiliser .getBoundingClientRect() pour obtenir le CSS ; boîte d'un élément SVG ou d'un élément en ligne (par exemple, utilisé pour Lorsque le texte est en surbrillance), vous pouvez utiliser .getClientRects() pour obtenir les propriétés CSS rendues des éléments et pseudo-éléments absolument positionnés, vous pouvez utiliser .getComputedStyle()

. Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article, et il y en aura d'autres à venir. Veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

Instruction JS try-catch et utilisation du type d'erreur

Comment transférer les données de configuration depuis le Centre de code séparation

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!