files/zh-cn/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
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
143
144
145
146
147
148

---
title: HTMLElement.offsetLeft
slug: Web/API/HTMLElement/offsetLeft
tags:
  - API
  - CSSOM
  - 参考
  - 只读
  - 属性
translation_of: Web/API/HTMLElement/offsetLeft
---
<div>{{ APIRef("HTML DOM") }}</div>

<p> <strong><code>HTMLElement.offsetLeft</code></strong> 是一个只读属性，返回当前元素<em>左上角</em>相对于  {{domxref("HTMLElement.offsetParent")}} 节点的左边界偏移的像素值。</p>

<p>对块级元素来说，<code>offsetTop</code>、<code>offsetLeft</code>、<code>offsetWidth</code> 及 <code>offsetHeight</code> 描述了元素相对于 <code>offsetParent</code> 的边界框。</p>

<p>然而，对于可被截断到下一行的行内元素（如 <strong>span</strong>），<code>offsetTop</code> 和 <code>offsetLeft</code> 描述的是<em>第一个</em>边界框的位置（使用 {{domxref("Element.getClientRects()")}} 来获取其宽度和高度），而 <code>offsetWidth</code> 和 <code>offsetHeight</code> 描述的是边界框的尺寸（使用 {{domxref("Element.getBoundingClientRect")}} 来获取其位置）。因此，使用 <code>offsetLeft、offsetTop、offsetWidth</code>、<code>offsetHeight</code> 来对应 left、top、width 和 height 的一个盒子将不会是文本容器 span 的盒子边界。</p>

<h2 id="Syntax" name="Syntax">语法</h2>

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

<p><code>left</code> 是一个整数，表示向左偏移的像素值。</p>

<h2 id="Example" name="Example">示例</h2>

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

if (tOLeft &gt; 5) {
  // large left offset: do something here
}
</pre>

<p>这个例子展示了蓝色边框的 div 包含一个长的句子，红色的盒子是一个可以表示包含这个长句子的span标签的边界。</p>

<p><img alt="Image:offsetLeft.jpg" class="internal" src="/@api/deki/files/790/=OffsetLeft.jpg"></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");
  //
  // long.offsetLeft这个值就是span的offsetLeft.
  // long.offsetParent 返回的是body（在chrome浏览器中测试）
  // 如果id为long的span元素的父元素div，设置了position属性值，只要不为static,那么long.offsetParent就是div

  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;">&lt;/script&gt; </span></pre>

<h2 id="Specification" name="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="Compatibility" name="Compatibility">浏览器兼容性</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>Basic support</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 for Android</th>
  </tr>
  <tr>
   <td>Basic support</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>根据规范，如果元素被隐藏（此元素的 style.display 或任何祖先为“none”），或者如果元素本身的 style.position 设置为“fixed”，则此属性将在Webkit上返回null 。</p>

<p>在 Internet Explorer (9) 上如果元素的 <code>style.position</code> 是 <code>"fixed"，则该属性为 null </code>(样式 <code>display:none</code> 不会影响。)</p>

<h2 id="See_also" name="See_also">相关链接</h2>

<ul>
 <li>{{domxref("HTMLElement.offsetParent")}}, {{domxref("HTMLElement.offsetTop")}}, {{domxref("HTMLElement.offsetWidth")}}, {{domxref(" HTMLElement.offsetHeight")}}</li>
</ul>