From 074785cea106179cb3305637055ab0a009ca74f2 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:42:52 -0500 Subject: initial commit --- files/ru/web/api/htmlelement/offsetleft/index.html | 81 ++++++++++++++++++++++ 1 file changed, 81 insertions(+) create mode 100644 files/ru/web/api/htmlelement/offsetleft/index.html (limited to 'files/ru/web/api/htmlelement/offsetleft/index.html') 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 +--- +
{{ APIRef("HTML DOM") }}
+ +

Свойство offsetLeft содержит левое смещение элемента относительно offsetParent. Содержит расстояние от offsetParent до границы элемента.

+ +

For block-level elements, offsetTop, offsetLeft, offsetWidth, and offsetHeight describe the border box of an element relative to the offsetParent.

+ +

However, for inline-level elements (such as span) that can wrap from one line to the next, offsetTop and offsetLeft describe the positions of the first border box (use {{domxref("Element.getClientRects()")}} to get its width and height), while offsetWidth and offsetHeight describe the dimensions of the bounding border box (use {{domxref("Element.getBoundingClientRect()")}} to get its position). Therefore, a box with the left, top, width and height of offsetLeft, offsetTop, offsetWidth and offsetHeight will not be a bounding box for a span with wrapped text.

+ +

Syntax

+ +
left = element.offsetLeft;
+
+ +

left is an integer representing the offset to the left in pixels from the closest relatively positioned parent element.

+ +

Example

+ +
var colorTable = document.getElementById("t1");
+var tOLeft = colorTable.offsetLeft;
+
+if (tOLeft > 5) {
+  // large left offset: do something here
+}
+
+ +

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.

+ +

Image:offsetLeft.jpg

+ +
<div style="width: 300px; border-color:blue; border-style:solid; border-width:1;">
+  <span>Short span. </span>
+  <span id="longspan">Long span that wraps within this div.</span>
+</div>
+
+<div id="box" style="position: absolute; border-color: red; border-width: 1; border-style: solid; z-index: 10">
+</div>
+
+<script type="text/javascript">
+  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 + "px";
+</script>
+ +

Specification

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSSOM View', '#dom-htmlelement-offsetleft', 'offsetLeft')}}{{Spec2('CSSOM View')}}
+ +

Browser compatibility

+ + + +

{{Compat("api.HTMLElement.offsetLeft")}}

+ +

See also

+ + -- cgit v1.2.3-54-g00ecf