Cette traduction est incomplète. Aidez à traduire cet article depuis l'anglais.
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
Ordinateur | Mobile | ||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|
Support simple | Chrome Support complet Oui | Edge Support complet Oui | Firefox Support complet 3 | IE Support complet 4 | Opera Support complet Oui | Safari Support complet 6 | WebView Android Support complet Oui | Chrome Android Support complet Oui | Edge Mobile Support complet Oui | Firefox Android Support complet 4 | Opera Android Support complet Oui | Safari iOS
Support complet
4
| Samsung Internet Android ? |
width | Chrome Support complet Oui | Edge Support complet Oui | Firefox Support complet 3.5 | IE Support complet 9 | Opera Support complet Oui | Safari Support complet Oui | WebView Android Support complet Oui | Chrome Android Support complet Oui | Edge Mobile ? | Firefox Android ? | Opera Android Support complet Oui | Safari iOS Support complet Oui | Samsung Internet Android ? |
height | Chrome Support complet Oui | Edge Support complet Oui | Firefox Support complet 3.5 | IE Support complet 9 | Opera Support complet Oui | Safari Support complet Oui | WebView Android Support complet Oui | Chrome Android Support complet Oui | Edge Mobile ? | Firefox Android ? | Opera Android Support complet Oui | Safari iOS Support complet Oui | Samsung Internet Android ? |
x | Chrome Support complet Oui | Edge
Aucun support
Non
| Firefox Support complet Oui | IE
Aucun support
Non
| Opera Support complet Oui | Safari Aucun support Non | WebView Android Support complet Oui | Chrome Android Support complet Oui | Edge Mobile ? | Firefox Android ? | Opera Android Support complet Oui | Safari iOS ? | Samsung Internet Android ? |
y | Chrome Support complet Oui | Edge
Aucun support
Non
| Firefox Support complet Oui | IE
Aucun support
Non
| Opera Support complet Oui | Safari Aucun support Non | WebView Android Support complet Oui | Chrome Android Support complet Oui | Edge Mobile ? | Firefox Android ? | Opera Android Support complet Oui | Safari iOS ? | Samsung Internet Android ? |
Légende
- Support complet
- Support complet
- Aucun support
- Aucun support
- Compatibilité inconnue
- Compatibilité inconnue
- Voir les notes d'implémentation.
- Voir les notes d'implémentation.