---
title: HTMLElement.dir
slug: Web/API/HTMLElement/dir
tags:
  - API
  - HTML DOM
  - HTMLElement
  - Property
  - Reference
translation_of: Web/API/HTMLElement/dir
---
<div>{{ApiRef("HTML DOM")}}</div>

<p><code><strong>HTMLElement.dir</strong></code> プロパティは、現在の要素のコンテンツのテキストを書く書字方向を取得または設定します。</p>

<p>要素のテキストを書く書字方向 (text writing directionality) は、テキストが向かう方向です (異なる言語体系のサポートのため)。 アラビア語とヘブライ語は、 RTL 書字方向を使用する典型的な言語です。</p>

<p>画像の <code>dir</code> プロパティを "<code>rtl</code>" に設定できます。 この場合、HTML 属性の <code>title</code> と <code>alt</code> は、 "<code>rtl</code>" としてフォーマットされ、定義されます。</p>

<p>表の <code>dir</code> が "<code>rtl</code>" に設定されている場合、列の順序は右から左に配置されます。</p>

<p>要素の <code>dir</code> が "<code>auto</code>" に設定されている場合、要素の方向は、最初の明確な書字方向文字 (strong directionality character)、または既定で親要素の書字方向に基づいて決定されます。</p>

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

<pre class="syntaxbox">var <em><var>currentWritingDirection</var></em> = <em>elementNodeReference</em>.dir;
<em>elementNodeReference</em>.dir = <em><var>newWritingDirection</var></em>;
</pre>

<ul>
 <li><code><var>currentWritingDirection</var></code> は、現在の要素のテキストを書く方向を表す文字列変数です。</li>
 <li><code><var>newWritingDirection</var></code> は、テキストを書く方向の値を表す文字列変数です。</li>
</ul>

<p><code>dir</code> が取り得る値は、左から右への <code>ltr</code>、右から左への <code>rtl</code>、および要素の内容に基づいて要素の方向を決定する必要があることを指定する <code>auto</code> です。</p>

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

<pre class="brush: js">var parg = document.getElementById("para1");
parg.dir = "rtl";
// "para1" として識別される段落のテキストの方向を変更します
</pre>

<h2 id="Specifications" name="Specifications">仕様書</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">仕様書</th>
   <th scope="col">状態</th>
   <th scope="col">備考</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName('HTML WHATWG', '#dom-dir', 'dir')}}</td>
   <td>{{Spec2('HTML WHATWG')}}</td>
   <td>{{SpecName('DOM2 HTML')}} からの変更はありません。</td>
  </tr>
  <tr>
   <td>{{SpecName('DOM2 HTML', 'html.html#ID-52460740', 'dir')}}</td>
   <td>{{Spec2('DOM2 HTML')}}</td>
   <td>{{SpecName('DOM1')}} からの変更はありません。</td>
  </tr>
  <tr>
   <td>{{SpecName('DOM1', 'level-one-html.html#ID-52460740', 'dir')}}</td>
   <td>{{Spec2('DOM1')}}</td>
   <td>初期定義</td>
  </tr>
 </tbody>
</table>

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

<p>{{Compat("api.HTMLElement.dir")}}</p>

<h2 id="See_also" name="See_also">関連情報</h2>

<ul>
 <li>{{domxref("document.dir")}}</li>
 <li>HTML の <a href="/ja/docs/Web/HTML/Global_attributes/dir"><code>dir</code></a> グローバル属性</li>
 <li>CSS の {{cssxref("direction")}} プロパティ</li>
 <li>CSS の {{cssxref(":dir")}} 擬似クラス</li>
</ul>