aboutsummaryrefslogtreecommitdiff
path: root/files/ru/web/api/htmlelement/offsetleft/index.html
diff options
context:
space:
mode:
authorPeter Bengtsson <mail@peterbe.com>2020-12-08 14:42:52 -0500
committerPeter Bengtsson <mail@peterbe.com>2020-12-08 14:42:52 -0500
commit074785cea106179cb3305637055ab0a009ca74f2 (patch)
treee6ae371cccd642aa2b67f39752a2cdf1fd4eb040 /files/ru/web/api/htmlelement/offsetleft/index.html
parentda78a9e329e272dedb2400b79a3bdeebff387d47 (diff)
downloadtranslated-content-074785cea106179cb3305637055ab0a009ca74f2.tar.gz
translated-content-074785cea106179cb3305637055ab0a009ca74f2.tar.bz2
translated-content-074785cea106179cb3305637055ab0a009ca74f2.zip
initial commit
Diffstat (limited to 'files/ru/web/api/htmlelement/offsetleft/index.html')
-rw-r--r--files/ru/web/api/htmlelement/offsetleft/index.html81
1 files changed, 81 insertions, 0 deletions
diff --git a/files/ru/web/api/htmlelement/offsetleft/index.html b/files/ru/web/api/htmlelement/offsetleft/index.html
new file mode 100644
index 0000000000..ded2335950
--- /dev/null
+++ b/files/ru/web/api/htmlelement/offsetleft/index.html
@@ -0,0 +1,81 @@
+---
+title: HTMLElement.offsetLeft
+slug: Web/API/HTMLElement/offsetLeft
+translation_of: Web/API/HTMLElement/offsetLeft
+---
+<div>{{ APIRef("HTML DOM") }}</div>
+
+<p>Свойство <strong>offsetLeft</strong> содержит левое смещение элемента относительно offsetParent. Содержит расстояние от offsetParent до границы элемента.</p>
+
+<p>For block-level elements, <code>offsetTop</code>, <code>offsetLeft</code>, <code>offsetWidth</code>, and <code>offsetHeight</code> describe the border box of an element relative to the <code>offsetParent</code>.</p>
+
+<p>However, for inline-level elements (such as <strong>span</strong>) that can wrap from one line to the next, <code>offsetTop</code> and <code>offsetLeft</code> describe the positions of the <em>first</em> border box (use {{domxref("Element.getClientRects()")}} to get its width and height), while <code>offsetWidth</code> and <code>offsetHeight</code> describe the dimensions of the <em>bounding</em> border box (use {{domxref("Element.getBoundingClientRect()")}} to get its position). Therefore, a box with the left, top, width and height of <code>offsetLeft</code>, <code>offsetTop</code>, <code>offsetWidth</code> and <code>offsetHeight</code> will not be a bounding box for a span with wrapped text.</p>
+
+<h2 id="Syntax" name="Syntax">Syntax</h2>
+
+<pre class="eval notranslate"><var>left</var> = <var>element</var>.offsetLeft;
+</pre>
+
+<p><code><var>left</var></code> is an integer representing the offset to the left in pixels <em>from the closest relatively positioned</em> parent element.</p>
+
+<h2 id="Example" name="Example">Example</h2>
+
+<pre class="brush: js notranslate">var colorTable = document.getElementById("t1");
+var tOLeft = colorTable.offsetLeft;
+
+if (tOLeft &gt; 5) {
+ // large left offset: do something here
+}
+</pre>
+
+<p>This example shows a 'long' sentence that wraps within a div with a blue border, and a red box that one might think should describe the boundaries of the span.</p>
+
+<p><img alt="Image:offsetLeft.jpg" class="internal" src="/@api/deki/files/790/=OffsetLeft.jpg"></p>
+
+<pre class="brush: html notranslate">&lt;div style="width: 300px; border-color:blue; border-style:solid; border-width:1;"&gt;
+ &lt;span&gt;Short span. &lt;/span&gt;
+ &lt;span id="longspan"&gt;Long span that wraps within this div.&lt;/span&gt;
+&lt;/div&gt;
+
+&lt;div id="box" style="position: absolute; border-color: red; border-width: 1; border-style: solid; z-index: 10"&gt;
+&lt;/div&gt;
+
+&lt;script type="text/javascript"&gt;
+ var box = document.getElementById("box");
+ var longspan = document.getElementById("longspan");
+ box.style.left = longspan.offsetLeft + document.body.scrollLeft + "px";
+ box.style.top = longspan.offsetTop + document.body.scrollTop + "px";
+ box.style.width = longspan.offsetWidth + "px";
+ box.style.height = longspan.offsetHeight<span style="line-height: normal;"> + "px"</span><span style="line-height: normal;">;
+</span><span style="line-height: normal;">&lt;/script&gt; </span></pre>
+
+<h2 id="Specification" name="Specification">Specification</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-htmlelement-offsetleft', 'offsetLeft')}}</td>
+ <td>{{Spec2('CSSOM View')}}</td>
+ <td></td>
+ </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+
+
+<p>{{Compat("api.HTMLElement.offsetLeft")}}</p>
+
+<h2 id="See_also" name="See_also">See also</h2>
+
+<ul>
+ <li>{{domxref("HTMLElement.offsetParent")}}, {{domxref("HTMLElement.offsetTop")}}, {{domxref("HTMLElement.offsetWidth")}}, {{domxref("HTMLElement.offsetHeight")}}</li>
+</ul>