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

Update compatibility data on GitHub
OrdinateurMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebview AndroidChrome pour AndroidFirefox pour AndroidOpera pour AndroidSafari sur iOSSamsung Internet
getBoundingClientRectChrome Support complet OuiEdge Support complet 12Firefox Support complet 3IE Support complet 4Opera Support complet OuiSafari Support complet 6WebView Android Support complet OuiChrome Android Support complet OuiFirefox Android Support complet 4Opera Android Support complet OuiSafari iOS Support complet 4
Notes
Support complet 4
Notes
Notes Safari for iOS will modify the effective viewport based on the user zoom. This results in incorrect values whenever the user has zoomed.
Samsung Internet Android Support complet Oui
widthChrome Support complet OuiEdge Support complet OuiFirefox Support complet 3.5IE Support complet 9Opera Support complet OuiSafari Support complet OuiWebView Android Support complet OuiChrome Android Support complet OuiFirefox Android ? Opera Android Support complet OuiSafari iOS Support complet OuiSamsung Internet Android ?
heightChrome Support complet OuiEdge Support complet OuiFirefox Support complet 3.5IE Support complet 9Opera Support complet OuiSafari Support complet OuiWebView Android Support complet OuiChrome Android Support complet OuiFirefox Android ? Opera Android Support complet OuiSafari iOS Support complet OuiSamsung Internet Android ?
xChrome Support complet OuiEdge Aucun support Non
Notes
Aucun support Non
Notes
Notes Returns a ClientRectList with ClientRect objects (which do not contain x and y properties) instead of DOMRect objects.
Firefox Support complet OuiIE Aucun support Non
Notes
Aucun support Non
Notes
Notes Returns a ClientRectList with ClientRect objects (which do not contain x and y properties) instead of DOMRect objects.
Opera Support complet OuiSafari Aucun support NonWebView Android Support complet OuiChrome Android Support complet OuiFirefox Android ? Opera Android Support complet OuiSafari iOS ? Samsung Internet Android ?
yChrome Support complet OuiEdge Aucun support Non
Notes
Aucun support Non
Notes
Notes Returns a ClientRectList with ClientRect objects (which do not contain x and y properties) instead of DOMRect objects.
Firefox Support complet OuiIE Aucun support Non
Notes
Aucun support Non
Notes
Notes Returns a ClientRectList with ClientRect objects (which do not contain x and y properties) instead of DOMRect objects.
Opera Support complet OuiSafari Aucun support NonWebView Android Support complet OuiChrome Android Support complet OuiFirefox Android ? Opera Android Support complet OuiSafari 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.

 

Voir aussi

Étiquettes et contributeurs liés au document

Étiquettes : 
Contributeurs à cette page : mdnwebdocs-bot, SphinxKnight, floribon, fscholz, teoli, khalid32, BenoitL, Mgjbot
Dernière mise à jour par : mdnwebdocs-bot,