La méthode Element.getBoundingClientRect() renvoie la taille d'un élément et sa position relative par rapport à la zone d'affichage (viewport).
Syntaxe
objetRect = object.getBoundingClientRect();
Valeur de retour
La valeur renvoyée par cette méthode est un objet DOMRect formé par l'union des rectangles renvoyés par la méthode getClientRects(). Autrement dit, cela correspond à la zone décrite par les boîtes de bordure associées à l'élément.
La valeur renvoyée est un objet DOMRect qui contient uniquement les propriétés left, top, right et bottom, en lecture seule, qui décrivent la boîte de bordure (border-box) en pixels. Les valeurs désignées par top et left sont relatives au coin en haut à gauche de la zone d'affichage.
Note : Gecko 1.9.1 ajoute les propriétés width et height à l'objet DOMRect.
Les boîtes de bordure vides sont complètement ignorées. Si toutes les boîtes de bordure associées à l'élément sont vides, la méthode renvoie un rectangle dont la largeur et la hauteur valent 0 et pour lequel top et left correspondent au coin en haut à gauche de la première boîte de bordure (dans l'ordre du contenu) de l'élément.
Le défilement (ou plutôt la quantité de défilement) est prise en compte dans le calcul du rectangle englobant. Ainsi, les valeurs des propriétés top et left sont modifiées dès que la position de défilement change (leurs valeurs sont donc relatives au viewport et ne sont pas exprimées de façon absolue). Si vous souhaitez obtenir des valeurs absolues, il suffit d'ajouter la position actuelle du défilement grâce à window.scrollX et window.scrollY afin d'obtenir des valeurs indépendantes de la position de défilement.
Pour les scripts qui doivent respecter certaines contraintes de compatibilité, il est possible d'utiliser window.pageXOffset et window.pageYOffset plutôt que window.scrollX et window.scrollY. Les scripts qui ne peuvent pas utiliser window.pageXOffset, window.pageYOffset, window.scrollX ou window.scrollY pourront utiliser cette méthode :
// Pour scrollX (((t = document.documentElement) || (t = document.body.parentNode)) && typeof t.ScrollLeft == 'number' ? t : document.body).ScrollLeft // Pour scrollY (((t = document.documentElement) || (t = document.body.parentNode)) && typeof t.ScrollTop == 'number' ? t : document.body).ScrollTop
Exemple
// rect est un objet DOMRect avec 6 propriétés // left, top, right, bottom, width, height var rect = obj.getBoundingClientRect();
Spécifications
| Spécification | État | Commentaires |
|---|---|---|
| CSS Object Model (CSSOM) View Module La définition de 'Element.getBoundingClientRect()' dans cette spécification. |
Version de travail | Définition initiale. |
Notes
getBoundingClientRect()fut initialement introduit avec le modèle objet DHTML de MS IE.- La valeur renvoyée par
getBoundingClientRect()est gelée.
Compatibilité des navigateurs
Nous convertissons les données de compatibilité dans un format JSON. Ce tableau de compatibilité utilise encore l'ancien format car nous n'avons pas encore converti les données qu'il contient. Vous pouvez nous aider en contribuant !
| Fonctionnalité | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari |
|---|---|---|---|---|---|
| Support simple | 1.0[1] | 3.0 (1.9)[3] | 4.0[2] | (Oui) | 4.0 |
width/height |
(Oui) | 3.5 (1.9.1)[3] | 9 | (Oui) | (Oui) |
| Fonctionnalité | Android | Chrome pour Android | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile |
|---|---|---|---|---|---|---|
| Support simple | 2.0 | 1.0 | 1.0 (1.9) | 6.0 | (Oui) | 4.0 |
[1] La spécification CSS pour l'élément use indique que l'élément symbol nécessite des valeurs par défaut de 100% pour width et height pour l'élément use. La spécification requiert que les attributs SVG width et height valent 100% par défaut. Google Chrome ne suit pas ces règles pour l'élément use. Chrome ne prend également pas en compte stroke-width. Pour cette raison, getBoundingClientRect() peut renvoyer des rectangles différents pour Chrome et Firefox.
[2] Pour IE8 et les versions antérieures, l'objet DOMRect qui était renvoyé par getBoundingClientRect() n'avait pas les propriétés height et width et on ne pouvait pas ajouter ces propriétés aux objets DOMRect.
[3] À partir de Gecko 12.0 (Firefox 12.0 / Thunderbird 12.0 / SeaMonkey 2.9), le calcul du rectangle englobant prend en compte les effets des transformations CSS.