---
title: Element.clientLeft
slug: Web/API/Element/clientLeft
tags:
- API
- CSSOM View
- NeedsAgnostify
- NeedsMarkupWork
- Property
- Reference
browser-compat: api.Element.clientLeft
translation_of: Web/API/Element/clientLeft
---
<div>{{ APIRef("DOM") }}</div>

<p>要素の左境界の幅をピクセル数で表します。これは、要素の書字方向が右書きで、オーバーフローがある場合、左の垂直スクロールバーがレンダリングされると垂直スクロールバーの幅を含みます。 <code>clientLeft</code> は、左マージンまたは左パディングを含みません。 <code>clientLeft</code> は読み取り専用です。</p>

<p><a class="external" href="http://kb.mozillazine.org/Layout.scrollbar.side"><code>layout.scrollbar.side</code> 設定項目</a>が 1 または 3 に設定されており、書字方向が RTL に設定されている場合、<strong>垂直スクロールバーは左側に配置され</strong>、これが clientLeft の計算方法に影響します。</p>

<div class="note">
	<p><strong>注:</strong> このプロパティは値を整数に丸めます。小数の値が必要な場合は、 {{ domxref("element.getBoundingClientRect()") }} を使用してください。
	</p>
</div>

<p style="height: 5px !important; margin: 0px;"></p>

<div class="note">
	<p><strong>注:</strong> 要素に
		<code>display: inline</code> が設定されている場合、境界の幅に関わらず <code>clientLeft</code> は <code>0</code> を返します。</p>
</div>

<h2 id="Syntax">構文</h2>

<pre class="brush: js">var <var>left</var> = <var>element</var>.clientLeft;
</pre>

<h2 id="Example">例</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">仕様書</h2>

{{Specifications}}

<h2 id="Browser_compatibility">ブラウザーの互換性</h2>

<p>{{Compat}}</p>

<h2 id="Notes">注</h2>

<p><code>clientLeft</code> は MS IE DHTML オブジェクトモデルで最初に導入されました。</p>

<p>要素に設定された書字方向が右書きである場合の垂直スクロールバーの位置は、 <a class="external"	href="http://kb.mozillazine.org/Layout.scrollbar.side"><code>layout.scrollbar.side</code> の設定に依存します</a></p>

<p><a href="/ja/Gecko">Gecko</a> ベースのアプリケーションは、 <code>clientLeft</code> を Gecko 1.9 (<a href="/ja/Firefox_3">Firefox 3</a>、 {{
	Bug(111207) }} による実装) から実装しました。このプロパティは Firefox 2 以前では対応していません。</p>