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
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
|
---
title: HTMLElement.offsetLeft
slug: Web/API/HTMLElement/offsetLeft
tags:
- API
- ApenasLeitura
- Propriedade
- Referência(2)
translation_of: Web/API/HTMLElement/offsetLeft
---
<div>{{ APIRef("HTML DOM") }}</div>
<p>O <strong><code>HTMLElement.offsetLeft</code></strong> é um método apenas de leitura que retorna a medida, em pixels, da distância do canto superior esquerdo do elemento atual para o nó {{domxref("HTMLElement.offsetParent")}}.</p>
<p>Para elementos "block-level", que ocupam todo o espaço do elemento pai, o <code>offsetTop</code>, <code>offsetLeft</code>, <code>offsetWidth</code>, e <code>offsetHeight</code> representam a borda de um elemento relativo ao <code>offsetParent</code>.</p>
<p>Entretando, para elementos "inline-level" (como o <strong>span</strong>) que podem envolver de uma linha para outra, o <code>offsetTop</code> e <code>offsetLeft</code> representam a posição da primeira borda (use {{domxref("Element.getClientRects()")}} para retornar a largura e altura), enquanto <code>offsetWidth</code> e <code>offsetHeight</code> representam as dimensões do bloco delimitador (use {{domxref("Element.getBoundingClientRect()")}} pra retornar sua posição). Portanto, um bloco que possua um left, top, widht ou height do <code>offsetLeft, offsetTop, offsetWidth</code> e <code>offsetHeight</code> não será um delimitador para um span com texto envolvido.</p>
<h2 id="Syntax" name="Syntax">Sintaxe</h2>
<pre class="eval"><em>left</em> = <em>element</em>.offsetLeft;
</pre>
<p><code>left</code> é um número inteiro representando o deslocamento para esquerda, em pixels, do elemento pai mais próximo posicionado com relative.</p>
<h2 id="Example" name="Example">Exemplo</h2>
<pre>var colorTable = document.getElementById("t1");
var tOLeft = colorTable.offsetLeft;
if (tOLeft > 5) {
// deslocamento à esquerda maior que 5: faça alguma coisa
}
</pre>
<p>Esse exemplo mostra uma frase 'longa' envolvida por uma div com uma borda azul, e uma caixa vermelha que deveria delimitar o span.</p>
<p><img alt="Image:offsetLeft.jpg" class="internal" src="/@api/deki/files/790/=OffsetLeft.jpg"></p>
<pre><div style="width: 300px; border-color:blue;
border-style:solid; border-width:1;">
<span>Short span. </span>
<span id="long">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>
var box = document.getElementById("box");
var long = document.getElementById("long");
box.style.left = long.offsetLeft + document.body.scrollLeft + "px";
box.style.top = long.offsetTop + document.body.scrollTop + "px";
box.style.width = long.offsetWidth + "px";
box.style.height = long.offsetHeight<span style="line-height: normal;"> + "px"</span><span style="line-height: normal;">;
</span><span style="line-height: normal;"></script> </span></pre>
<h2 id="Specification" name="Specification">Especificação</h2>
<table class="standard-table">
<thead>
<tr>
<th scope="col">Especificação</th>
<th scope="col">Status</th>
<th scope="col">Comentário</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="Compatibility" name="Compatibility">Compatibilidade do navegador</h2>
<p>{{CompatibilityTable}}</p>
<div id="compat-desktop">
<table class="compat-table">
<tbody>
<tr>
<th>Feature</th>
<th>Chrome</th>
<th>Firefox (Gecko)</th>
<th>Internet Explorer</th>
<th>Opera</th>
<th>Safari (WebKit)</th>
</tr>
<tr>
<td>Suporte Básico</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatUnknown}}</td>
<td>{{CompatUnknown}}</td>
<td>{{CompatUnknown}}</td>
<td>{{CompatUnknown}}</td>
</tr>
</tbody>
</table>
</div>
<div id="compat-mobile">
<table class="compat-table">
<tbody>
<tr>
<th>Feature</th>
<th>Android</th>
<th>Android Webview</th>
<th>Firefox Mobile (Gecko)</th>
<th>Firefox OS</th>
<th>IE Mobile</th>
<th>Opera Mobile</th>
<th>Safari Mobile</th>
<th>Chrome para Android</th>
</tr>
<tr>
<td>Suporte Básico</td>
<td>{{CompatUnknown}}</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatUnknown}}</td>
<td>{{CompatUnknown}}</td>
<td>{{CompatUnknown}}</td>
<td>{{CompatUnknown}}</td>
<td>{{CompatUnknown}}</td>
<td>{{CompatVersionUnknown}}</td>
</tr>
</tbody>
</table>
</div>
<p>Em conformidade com a especificação, essa propriedade retornará <code>null no</code> Webkit se o elemento não estiver sendo exibido (o <code>style.display</code> desse elemento ou ancestral estiver como <code>"none"</code>) ou se o <code>style.position</code> do elemento estiver setado como <code>"fixed"</code>.</p>
<p>Essa propriedade retornará <code>null</code> no Internet Explorer (9) se o <code>style.position</code> do elemento estiver setado como <code>"fixed"</code>. (Ter <code>display:none</code> não afeta esse browser.)</p>
<h2 id="See_also" name="See_also">Veja também</h2>
<ul>
<li>{{domxref("HTMLElement.offsetParent")}}, {{domxref("HTMLElement.offsetTop")}}, {{domxref("HTMLElement.offsetWidth")}}, {{domxref("HTMLElement.offsetHeight")}}</li>
</ul>
|