element.getBoundingClientRect

  • Raccourci de la révision : DOM/element.getBoundingClientRect
  • Titre de la révision : element.getBoundingClientRect
  • ID de la révision : 113986
  • Créé :
  • Créateur : BenoitL
  • Version actuelle ? Non
  • Commentaire update; 209 words added, 14 words removed

Contenu de la révision

{{ Fx_minversion_header("3") }} {{ DomRef() }}

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_callout_heading("1.9.1") }}

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

  • {{ MSDN("ms536433", "getBoundingClientRect Method") }}

Voir également

 

{{ languages( { "en": "en/DOM/element.getBoundingClientRect", "es": "es/DOM/element.getBoundingClientRect", "ja": "ja/DOM/element.getBoundingClientRect" } ) }}

Source de la révision

<p>{{ Fx_minversion_header("3") }} {{ DomRef() }}</p>
<h3 id="R.C3.A9sum.C3.A9" name="R.C3.A9sum.C3.A9">Résumé</h3>
<p>Renvoie un objet de rectangle texte qui entoure un groupe de rectangles de texte.</p>
<h3 id="Syntaxe" name="Syntaxe">Syntaxe</h3>
<pre class="eval">var <em>rectObject</em> = <var>object</var>.getBoundingClientRect();
</pre>
<h3 id="Valeur_de_retour" name="Valeur_de_retour">Valeur de retour</h3>
<p>La valeur renvoyée est un objet <a href="/fr/nsIDOMClientRect" title="fr/nsIDOMClientRect">TextRectangle</a> qui est l'union des rectangles renvoyés par <code>getClientRects()</code> pour l'élément, c'est-à-dire, les boîtes-bordures CSS associées avec l'élément.</p>
<p>L'objet TextRectangle renvoyé contient les propriétés en lecture seule <code>left</code>, <code>top</code>, <code>right</code> et <code>bottom</code> 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 <code>foreignobject</code>, auquel cas sa position est relative à l'ancêtre le plus proche de l'élément <code>foreignobject</code>, et dans le système de coordonnées de cet élément <code>foreignobject</code>.</p>
<div class="geckoVersionNote">
<p>{{ gecko_callout_heading("1.9.1") }}</p>
<p>Firefox 3.5 ajoute les propriétés <code>width</code> et <code>height</code> à l'objet <code>TextRectangle</code>.</p>
</div>
<p>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 <code>top</code> et <code>left</code> 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.</p>
<p>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 <code>top</code> et <code>left</code> 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 <code>top</code> et <code>left</code> (via <code>window.scrollX</code> et <code>window.scrollY</code>) pour obtenir des valeurs constantes indépendantes de tout défilement.</p>
<h3 id="Exemple" name="Exemple">Exemple</h3>
<pre class="eval">var rect = obj.getBoundingClientRect();
</pre>
<h3 id="Sp.C3.A9cification" name="Sp.C3.A9cification">Spécification</h3>
<p><a class="external" href="http://www.w3.org/TR/cssom-view/#the-getclientrects" title="http://www.w3.org/TR/cssom-view/#the-getclientrects">CSSOM Views: The getClientRects() and getBoundingClientRect() methods </a></p>
<h3 id="Notes" name="Notes">Notes</h3>
<p><code>getBoundingClientRect()</code> faisait initialement partie du modèle objet DHTML de Microsoft Internet Explorer.</p>
<h3 id="R.C3.A9f.C3.A9rences" name="R.C3.A9f.C3.A9rences">Références</h3>
<ul> <li>{{ MSDN("ms536433", "getBoundingClientRect Method") }}</li>
</ul>
<h3 id="Voir_également">Voir également</h3>
<ul> <li><a class="internal" href="/fr/DOM/element.getClientRects" title="fr/DOM/Element.getClientRects"><code>getClientRects()</code></a></li>
</ul>
<p> </p>

<p>{{ languages( { "en": "en/DOM/element.getBoundingClientRect", "es": "es/DOM/element.getBoundingClientRect", "ja": "ja/DOM/element.getBoundingClientRect" } ) }}</p>
Revenir à cette révision