diff options
Diffstat (limited to 'files/ja/web/api/element/clientleft/index.md')
| -rw-r--r-- | files/ja/web/api/element/clientleft/index.md | 86 |
1 files changed, 86 insertions, 0 deletions
diff --git a/files/ja/web/api/element/clientleft/index.md b/files/ja/web/api/element/clientleft/index.md new file mode 100644 index 0000000000..7a17600640 --- /dev/null +++ b/files/ja/web/api/element/clientleft/index.md @@ -0,0 +1,86 @@ +--- +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> |