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
|
---
title: Element.clientLeft
slug: Web/API/Element/clientLeft
translation_of: Web/API/Element/clientLeft
---
<p>{{ APIRef() }}</p>
<p>表示一个元素的左边框的宽度，以像素表示。如果元素的文本方向是从右向左（RTL, right-to-left），并且由于内容溢出导致左边出现了一个垂直滚动条，则该属性包括滚动条的宽度。<code>clientLeft</code> 不包括左外边距和左内边距。<code>clientLeft</code> 是只读的。</p>
<p>从 <a href="zh-CN/Gecko">Gecko</a> 1.9（<a href="zh-CN/Firefox_3">Firefox 3</a> {{ Bug(111207) }}）开始，基于 Gecko 的应用支持 <code>clientLeft</code> 属性。该属性在 Firefox 2 及更早的版本中不被支持。</p>
<p>当 <a class="external" href="http://kb.mozillazine.org/Layout.scrollbar.side"><em>layout.scrollbar.side </em> preference</a> （译注：这个属性好像是只在火狐浏览器中才有）被设为 1 或 3，且文本方向被设为从右到左（RTL），则垂直滚动条位于左边，这会影响到 <code>clientLeft</code> 属性值的计算。</p>
<h2 id="语法">语法</h2>
<pre class="eval">var <var>left</var> = <var>element</var>.clientLeft;
</pre>
<h2 id="示例">示例 </h2>
<div id="offsetContainer" style="margin: 40px 50px 50px; background-color: rgb(255, 255, 204); border: 4px dashed black; color: black; position: relative; display: inline-block;">
<div id="idDiv" style="margin: 24px 29px; border: 24px black solid; padding: 0px 28px; width: 199px; height: 102px; overflow: auto; background-color: white; font-size: 13px!important; font-family: Arial, sans-serif;">
<p id="PaddingTopLabel" style="text-align: center; font-style: italic; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif; margin: 0px;">padding-top</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p id="PaddingBottomLabel" style="text-align: center; font-style: italic; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif; margin: 0px;">padding-bottom</p>
</div>
<strong style="color: blue; font-family: arial,sans-serif; font-size: 13px!important; font-weight: bold; left: -32px; position: absolute; top: 85px;">Left</strong> <strong style="color: blue; font-family: arial,sans-serif; font-size: 13px!important; font-weight: bold; left: 170px; position: absolute; top: -24px;">Top</strong> <strong style="color: blue; font-family: arial,sans-serif; font-size: 13px!important; font-weight: bold; left: 370px; position: absolute; top: 85px;">Right</strong> <strong style="color: blue; font-family: arial,sans-serif; font-size: 13px!important; font-weight: bold; left: 164px; position: absolute; top: 203px;">Bottom</strong> <em>margin-top</em> <em>margin-bottom</em> <em>border-top</em> <em>border-bottom</em></div>
<h2 id="Specifications">Specifications</h2>
<table class="standard-table">
<tbody>
<tr>
<th scope="col">Specification</th>
<th scope="col">Status</th>
<th scope="col">Comment</th>
</tr>
<tr>
<td>{{SpecName('CSSOM View', '#dom-element-clientleft', 'clientLeft')}}</td>
<td>{{Spec2("CSSOM View")}}</td>
<td></td>
</tr>
</tbody>
</table>
<h2 id="Browser_compatibility">Browser compatibility</h2>
<p>{{Compat("api.Element.clientLeft")}}</p>
<h2 id="备注">备注</h2>
<p><code>clientLeft</code> 首次出现于 MS IE DHTML 对象模型中。</p>
<p>元素的文本方向被设为从右到左后，其垂直滚动条的位置取决于 <a class="external" href="http://kb.mozillazine.org/Layout.scrollbar.side"><em>layout.scrollbar.side </em> preference</a></p>
<p>当元素设置 <code>display: inline</code> 后，无论是否有边框，<code>clientLeft</code> 始终返回 <code>0</code> 。</p>
|
