Element.
Renvoie la taille d’un élément et sa position par rapport à la zone visible de la fenêtre, sous la forme d’un objet DOMRect.
- Renvoie
- Un objet
DOMRectavec les propriétésx,y,width,height,top,right,bottometleft(en pixels CSS).
Exemple
#const card = document.querySelector('#card')
requestAnimationFrame(() => {
const rect = card.getBoundingClientRect()
console.log(Math.round(rect.width), Math.round(rect.height))
console.log(Math.round(rect.left), Math.round(rect.top))
console.log(Math.round(rect.right), Math.round(rect.bottom))
})La largeur comprend le remplissage et la bordure, car dans l’aperçu les éléments ont box-sizing: border-box. Le left égal à 36 correspond aux 16 px d’espacement de la page et aux 20 px de marge de la carte, et right est toujours égal à left + width. La mesure attend la première image (requestAnimationFrame()), car le cadre de l’exemple reçoit sa taille un instant après le démarrage du script. Sur une page normale, déjà affichée, vous pouvez mesurer immédiatement.
Définition et utilisation
#La méthode getBoundingClientRect() mesure l’élément tel qu’il apparaît à l’écran. Elle renvoie un objet DOMRect avec les propriétés width et height (la taille) ainsi que top, right, bottom et left (la position des bords). Il y a aussi x et y, qui pour les éléments équivalent à left et top.
La position est calculée par rapport à la zone visible de la fenêtre (le viewport), pas au début du document. Quand vous faites défiler la page vers le bas, le top de l’élément diminue, et pour les éléments au-dessus de l’écran, il devient négatif. Vous obtenez la position par rapport à toute la page en ajoutant le défilement : rect.top + window.scrollY. Ce sont les mêmes coordonnées qu’utilise position: fixed, ce qui permet de placer facilement à côté de l’élément, par exemple, une bulle d’aide.
La taille comprend le remplissage (padding) et la bordure, c’est-à-dire toute la surface occupée par l’élément. Elle tient aussi compte des transformations CSS : transform: scale(2) double la largeur renvoyée. Les valeurs sont parfois décimales, par ex. lors d’un zoom de la page, c’est pourquoi il vaut la peine de les arrondir avant de les comparer. La lecture peut aussi forcer le navigateur à recalculer immédiatement la mise en page si des styles ont changé juste avant.
Syntaxe
#element.getBoundingClientRect()Plus d’exemples
#const badge = document.querySelector('#badge')
requestAnimationFrame(() => {
console.log(badge.offsetWidth)
console.log(Math.round(badge.getBoundingClientRect().width))
})offsetWidth donne la largeur d’après la mise en page et ignore transform. getBoundingClientRect() mesure l’élément après l’agrandissement, donc tel qu’il apparaît à l’écran.
const help = document.querySelector('#help')
const tooltip = document.querySelector('#tooltip')
help.addEventListener('click', () => {
const rect = help.getBoundingClientRect()
tooltip.style.left = `${Math.round(rect.left)}px`
tooltip.style.top = `${Math.round(rect.bottom + 8)}px`
tooltip.hidden = false
console.log(tooltip.style.left, tooltip.style.top)
})
requestAnimationFrame(() => help.click())Les coordonnées de getBoundingClientRect() et celles de position: fixed sont calculées depuis le même point, le coin supérieur gauche de la zone visible. La bulle atterrit donc 8 px sous le bord inférieur du bouton. Nous simulons le clic à la première image, quand le cadre de l’aperçu a déjà sa taille.
Compatibilité des navigateurs
#Largement disponible
Fonctionne dans tous les navigateurs modernes, y compris sur mobile. Vous pouvez l’utiliser sans crainte.
- Chrome
- Edge
- Firefox
- Safari
Bonnes pratiques
#- Les coordonnées changent avec le défilement, car elles sont calculées depuis la zone visible de la fenêtre. La position sur la page est
rect.top + window.scrollY. - Arrondissez les résultats avec
Math.round()avant de les comparer ou de les afficher. Les valeurs sont parfois décimales en cas de zoom de la page. - Un élément masqué par
display: none, ou pas encore inséré dans le document, a toutes ses dimensions à 0. Mesurez-le seulement une fois qu’il est affiché.
Entrées associées
#- Element.scrollIntoView()Fait défiler la page et les conteneurs défilants pour que l’élément apparaisse à l’écran, par un saut ou en douceur.
- IntersectionObserverObserve si un élément est visible dans la fenêtre ou dans un conteneur défilant, et appelle une fonction quand cela change.
- ResizeObserverAppelle une fonction chaque fois que la taille d’un élément observé change, quelle qu’en soit la cause.
- getComputedStyle()Renvoie les styles calculés d’un élément, c’est-à-dire les valeurs CSS que le navigateur a réellement appliquées après avoir pris en compte toutes les règles.
- Math.round()Arrondit un nombre à l’entier le plus proche.
Vous voyez une erreur ou il manque un exemple ? Écrivez-nous.