1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
|
---
title: Element.getBoundingClientRect()
slug: Web/API/Element/getBoundingClientRect
translation_of: Web/API/Element/getBoundingClientRect
---
<div>{{APIRef("DOM")}}</div>
<p style="direction: rtl;"><code><font face="Arial, x-locale-body, sans-serif"><span style="background-color: #ffffff;"> روال </span></font><strong>Element.getBoundingClientRect() اندازه و محل قرار گیری نسبی یک ایتم را در صفحه باز می گرداند </strong></code></p>
<p style="direction: rtl;"> </p>
<h2 id="ترکیب" style="direction: rtl;">ترکیب</h2>
<pre class="syntaxbox" style="direction: rtl;">var <a href="/en-US/docs/Web/API/DOMRect">domRect</a> = <a href="/en-US/docs/Web/API/Element">element</a>.getBoundingClientRect();</pre>
<h3 id="Value">Value</h3>
<p style="direction: rtl;">مقدار بازگشتی تابع {{domxref("DOMRect")}} شی ای می باشد که با اجتماع مسطتیلی که با آیتم {{domxref("Element.getClientRects", "getClientRects()")}} بازگشت می شود.</p>
<p style="direction: rtl;">The returned value is a {{domxref("DOMRect")}} object which is the union of the rectangles returned by {{domxref("Element.getClientRects", "getClientRects()")}} for the element, i.e., the CSS border-boxes associated with the element. The result is the smallest rectangle which contains the entire element, with read-only <code>left</code>, <code>top</code>, <code>right</code>, <code>bottom</code>, <code>x</code>, <code>y</code>, <code>width</code>, and <code>height</code> properties describing the overall border-box in pixels. Properties other than <code>width</code> and <code>height</code> are relative to the top-left of the viewport.</p>
<p>Empty border-boxes are completely ignored. If all the element's border-boxes are empty, then a rectangle is returned with a <code>width</code> and <code>height</code> 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 (or any other scrollable element) is taken into account when computing the bounding rectangle. This means that the rectangle's boundary edges (<font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.498039);">top, right, bottom, left</span></font>) change their values every time the scrolling position changes (because their values are relative to the viewport and not absolute). If you need the bounding rectangle relative to the top-left corner of the document, just add the current scrolling position to the <code>top</code> and <code>left</code> properties (these can be obtained using {{domxref("window.scrollX")}} and {{domxref("window.scrollY")}}) to get a bounding rectangle which is independent from the current scrolling position.</p>
<p>Scripts requiring high cross-browser compatibility can use {{domxref("window.pageXOffset")}} and {{domxref("window.pageYOffset")}} instead of <code>window.scrollX</code> and <code>window.scrollY.</code> Scripts without access to these properties can use code like this:</p>
<pre class="brush:js">// For scrollX
(((t = document.documentElement) || (t = document.body.parentNode))
&& typeof t.scrollLeft == 'number' ? t : document.body).scrollLeft
// For scrollY
(((t = document.documentElement) || (t = document.body.parentNode))
&& typeof t.scrollTop == 'number' ? t : document.body).scrollTop
</pre>
<h2 id="مثال" style="direction: rtl;">مثال</h2>
<pre class="brush:js">// rect is a DOMRect object with eight properties: left, top, right, bottom, x, y, width, height
var rect = obj.getBoundingClientRect();
</pre>
<h2 id="ویژگی_ها" style="direction: rtl;">ویژگی ها</h2>
<table class="standard-table">
<thead>
<tr>
<th scope="col">Specification</th>
<th scope="col">Status</th>
<th scope="col">Comment</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{SpecName("CSSOM View", "#dom-element-getboundingclientrect", "Element.getBoundingClientRect()")}}</td>
<td>{{Spec2("CSSOM View")}}</td>
<td>Initial definition</td>
</tr>
</tbody>
</table>
<h3 id="Notes">Notes</h3>
<p>The returned <code>DOMRect</code> object can be modified in modern browsers. This was not true with older versions which effectively returned <code>DOMRectReadOnly</code>. With IE and Edge, not being able to add missing properties to their returned <a href="https://msdn.microsoft.com/en-us/library/hh826029(VS.85).aspx"><code>ClientRect</code></a>, object prevents backfilling <code>x</code> and <code>y</code>.</p>
<p>Due to compatibility problems (see below), it is safest to rely on only properties <code>left</code>, <code>top</code>, <code>right</code>, and <code>bottom</code>. </p>
<p>Properties in the returned <code>DOMRect</code> object are not own properties. While the <code>in</code> operator and <code>for...in</code> will find returned properties, other APIs such as <code>Object.keys()</code> will fail. Moreover, and unexpectedly, the ES2015 and newer features such as <code>Object.assign()</code> and object rest/spread will fail to copy returned properties.</p>
<pre class="brush: js">rect = elt.getBoundingClientRect()
// The result in emptyObj is {}
emptyObj = Object.assign({}, rect)
emptyObj = { ...rect }
{width, ...emptyObj} = rect
</pre>
<p><code>DOMRect</code> properties <code>top</code> <code>left</code> <code>right</code> <code>bottom</code> are computed from the other property values.</p>
<h2 id="سازگاری_با_مرورگر_ها" style="direction: rtl;">سازگاری با مرورگر ها</h2>
<div class="hidden" style="direction: rtl;">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</div>
<p>{{Compat("api.Element.getBoundingClientRect")}}</p>
<h2 id="همچنین" style="direction: rtl;">همچنین</h2>
<ul>
<li><code><a href="/en-US/docs/DOM/element.getClientRects">getClientRects()</a></code></li>
<li><a href="https://msdn.microsoft.com/en-us/library/ms536433(VS.85).aspx">MSDN: <code>getBoundingClientRect</code></a></li>
<li><a href="https://msdn.microsoft.com/en-us/library/hh826029(VS.85).aspx">MSDN: <code>ClientRect</code></a>, an earlier version of <code>DOMRect</code></li>
</ul>
|
