Element.getBoundingClientRect()

  • Revision slug: DOM/element.getBoundingClientRect
  • Revision title: element.getBoundingClientRect
  • Revision id: 13532
  • Created:
  • Creator: lunalum
  • Is current revision? No
  • Comment 1 words added, 5 words removed

Revision Content

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

Summary

Returns a text rectangle object that encloses a group of text rectangles.

Syntax

var rectObject = object.getBoundingClientRect();

Returns

The returned value is a TextRectangle object which is the union of the rectangles returned by getClientRects() for the element, i.e., the CSS border-boxes associated with the element.

The returned value is a TextRectangle object, which contains read-only left, top, right and bottom properties describing the border-box, in pixels, with the top-left relative to the top-left of the viewport , unless the element is inside an SVG foreignobject element, in which case the top-left is relative to the nearest foreignobject ancestor and in the coordinate system of that foreignobject.

{{ fx_minversion_note("3") }}

Empty border-boxes are completely ignored. If all the element's border-boxes are empty, then a rectangle is returned with a width and height of zero and where the top and left are the top-left of the border-box for the first CSS box (in content order) for the element.

The amount of scrolling that has been done of the viewport area is taken into account when computing the bounding rectangle.

Example

var rect = obj.getBoundingClientRect();

Specification

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

Notes

getBoundingClientRect() was first introduced in the MS IE DHTML object model.

References

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

See also

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

Revision Source

<p>{{ Fx_minversion_header("3") }} {{ DomRef() }}</p>
<h3 name="Summary">Summary</h3>
<p>Returns a text rectangle object that encloses a group of text rectangles.</p>
<h3 name="Syntax">Syntax</h3>
<pre class="eval">var <em>rectObject</em> = <var>object</var>.getBoundingClientRect();
</pre>
<h3 name="Returns">Returns</h3>
<p>The returned value is a TextRectangle object which is the union of the rectangles returned by <code>getClientRects()</code> for the element, i.e., the CSS border-boxes associated with the element.</p>
<p>The returned value is a TextRectangle object, which contains read-only <code>left</code>, <code>top</code>, <code>right</code> and <code>bottom</code> properties describing the border-box, in pixels, with the top-left relative to the top-left of the viewport	, unless the element is inside an SVG <code>foreignobject</code> element, in which case the top-left is relative to the nearest <code>foreignobject</code> ancestor and in the coordinate system of that <code>foreignobject</code>.</p>
<p>{{ fx_minversion_note("3") }}</p>
<p>Empty border-boxes are completely ignored. If all the element's border-boxes are empty, then a rectangle is returned with a width and height of zero and where the <code>top</code> and <code>left</code> are the top-left of the border-box for the first CSS box (in content order) for the element.</p>
<p>The amount of scrolling that has been done of the viewport area is taken into account when computing the bounding rectangle.</p>
<h3 name="Example">Example</h3>
<pre class="eval">var rect = obj.getBoundingClientRect();
</pre>
<h3 name="Specification">Specification</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 name="Notes">Notes</h3>
<p><code>getBoundingClientRect()</code> was first introduced in the MS IE DHTML object model.</p>
<h3 name="References">References</h3>
<ul> <li>{{ MSDN("ms536433", "getBoundingClientRect Method") }}</li>
</ul>
<h3>See also</h3>
<ul> <li><a class="internal" href="/en/DOM/element.getClientRects" title="En/DOM/Element.getClientRects"><code>getClientRects()</code></a></li>
</ul>
<p>{{ languages( { "es": "es/DOM/element.getBoundingClientRect", "fr": "fr/DOM/element.getBoundingClientRect", "ja": "ja/DOM/element.getBoundingClientRect" } ) }}</p>
Revert to this revision