element.getBoundingClientRect

« Référence du DOM

Résumé

Renvoie un objet de rectangle texte qui entoure un groupe de rectangles de texte.

Syntaxe

var rectObject = object.getBoundingClientRect();

Valeur de retour

La valeur renvoyée est un objet TextRectangle qui est l'union des rectangles renvoyés par getClientRects() pour l'élément, c'est-à-dire, les boîtes-bordures CSS associées avec l'élément.

L'objet TextRectangle renvoyé contient les propriétés en lecture seule left, top, right et bottom qui décrivent la boîte, en pixels. La position du coin en haut à gauche est relative à la zone de visualisation (viewport), sauf si l'élément fait partie d'un élément SVG foreignobject, auquel cas sa position est relative à l'ancêtre le plus proche de l'élément foreignobject, et dans le système de coordonnées de cet élément foreignobject.

Gecko 1.9.1 note
(Firefox 3.5 / Thunderbird 3.0 / SeaMonkey 2.0)

Firefox 3.5 ajoute les propriétés width et height à l'objet TextRectangle.

Les boîtes-bordures vides sont complètement ignorées. Si toutes les boîtes-bordures de l'élément sont vides, un rectangle avec une largeur et une hauteur de zéro est renvoyé et ses propriétés top et left correspondent au coin supérieur gauche de la boîte-bordure de la première boîte CSS (dans l'ordre du contenu) pour l'élément.

Les éventuels défilements effectués dans la zone de visualisation sont pris en compte lors du calcul des rectangles. Cela signifie que les propriétés top et left changent de valeurs dès que la position de défilement change (leurs valeurs sont relatives à cette zone de visualisation et ne sont pas absolues). Si ce n'est pas le comportement désiré, ajoutez simplement la position de défilement aux propriétés top et left (via window.scrollX et window.scrollY) pour obtenir des valeurs constantes indépendantes de tout défilement.

Exemple

var rect = obj.getBoundingClientRect();

Spécification

CSSOM Views: The getClientRects() and getBoundingClientRect() methods

Notes

getBoundingClientRect() faisait initialement partie du modèle objet DHTML de Microsoft Internet Explorer.

Références

Voir également

 

Étiquettes et contributeurs liés au document

Contributeurs ayant participé à cette page : BenoitL, Mgjbot
Dernière mise à jour par : BenoitL,