files/pl/web/api/htmlelement/offsetleft/index.html


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

---
title: element.offsetLeft
slug: Web/API/HTMLElement/offsetLeft
tags:
  - DOM
  - Dokumentacja_Gecko_DOM
  - Gecko
  - Strony_wymagające_dopracowania
  - Wszystkie_kategorie
translation_of: Web/API/HTMLElement/offsetLeft
original_slug: Web/API/Element/offsetLeft
---
<p>{{ ApiRef("HTML DOM") }}</p>

<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3>

<p>Zwraca ilość pikseli, jaką dzieli<em>górny lewy róg</em> bieżącego elementu od lewej strony wewnątrz węzła <code><a href="pl/DOM/element.offsetParent">offsetParent</a></code>.</p>

<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3>

<pre class="eval"><em>left</em> =<em>element</em>.offsetLeft;
</pre>

<p><code>left</code> jest liczbą całkowitą reprezentująca przesunięcie od lewej strony podane w pikselach.</p>

<h3 id="Uwaga" name="Uwaga">Uwaga</h3>

<p><code>offsetLeft</code> returns the position the upper left edge of the element; not necessarily the 'real' left edge of the element. This is important for inline elements (such as <strong>span</strong>) in flowed text that wraps from one line to the next. The span may start in the middle of the line and wrap around to the beginning of the next line. The <code>offsetLeft</code> will refer to the left edge of the start of the span, not the left edge of text at the start of the second line. Therefore, a box with the left, top, width and height of <code>offsetLeft, offsetTop, offsetWidth</code> and <code>offsetHeight</code> will not be a bounding box for a span with wrapped text. (And, I can't figure out how to find the leftmost edge of such a span, sigh.)</p>

<h3 id="Przyk.C5.82ad" name="Przyk.C5.82ad">Przykład</h3>

<pre>var colorTable = document.getElementById("t1");
var tOLeft = colorTable.offsetLeft;

if (tOLeft &gt; 5) {
  // duże lewe przesunięcie: zrób coś tutaj
}
</pre>

<h3 id="Przyk.C5.82ad_2" name="Przyk.C5.82ad_2">Przykład</h3>

<p>Per the note above, 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"></p>

<p><small><font color="gray">Note: This is an image of the example, not a live rendering in the browser. This was done because script elements can't be included in the wiki page.</font></small></p>

<pre>&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="long"&gt;Long span that wraps withing 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&gt;
  var box = document.getElementById("box");
  var long = document.getElementById("long");
  box.style.left = long.offsetLeft + document.body.scrollLeft;
  box.style.top = long.offsetTop + document.body.scrollTop;
  box.style.width = long.offsetWidth;
  box.style.height = long.offsetHeight;
&lt;/script&gt;
</pre>

<h3 id="Zobacz_tak.C5.BCe" name="Zobacz_tak.C5.BCe">Zobacz także</h3>

<p><code><a href="pl/DOM/element.offsetParent">offsetParent</a></code>, <code><a href="pl/DOM/element.offsetTop">offsetTop</a></code>, <code><a href="pl/DOM/element.offsetWidth">offsetWidth</a></code>, <code><a href="pl/DOM/element.offsetHeight">offsetHeight</a></code></p>

<h3 id="Specyfikacja" name="Specyfikacja">Specyfikacja</h3>

<p>Niestandardowa własność.</p>