style.directionプロパティ

style.directionは、要素のスタイル属性のdirectionプロパティの値を取得、もしくは、設定するプロパティ。

directionプロパティは、テキストの方向を指定することができる。

directionプロパティを、インラインレベル要素に適用するには、unicodeBidiプロパティの値を、「embed」か「bidi-override」に設定する必要がある。

構文

取得

var $direction = $elementReference.style.direction;

戻り値

要素のスタイル属性のdirectionプロパティの値。

設定

$elementReference.style.direction = "ltr | rtl | inherit";
ltr | rtl | inherit
下記の何れかの値を指定する。初期設定値は、「ltr」。
  • ltr:左から右。
  • rtl:右から左。
  • inherit:親要素の設定を継承。

サンプル

direction:

サンプル要素のdirectionプロパティの値:

unicodeBidi:

サンプル要素のunicode-bidiプロパティの値:

サンプル要素

サンプルの動作について

  • 「direction:」の右横のボタンをクリックすると、「directionプロパティ」の値をボタン名のテキストに設定する。設定値を、「サンプル要素のdirectionプロパティの値:」の右横に表示する。
  • 「unicodeBidi:」の右横のボタンをクリックすると、「unicode-bidiプロパティ」の値をボタン名のテキストに設定する。設定値を、「サンプル要素のunicode-bidiプロパティの値:」の右横に表示する。

サンプルのソースコード

JavaScript

<script type="text/javascript">
function setDirection( $direction ) {
 var $element = document.getElementById( "sample" );
 $element.style.direction = $direction;
 var $direction = $element.style.direction;
 document.getElementById( "sampleOutputDirection" ).innerHTML = $direction;
}
function setUnicodeBidi( $unicodeBidi ) {
 var $element = document.getElementById( "sample" );
 $element.style.unicodeBidi = $unicodeBidi;
 var $unicodeBidi = $element.style.unicodeBidi;
 document.getElementById( "sampleOutputUnicodeBidi" ).innerHTML = $unicodeBidi;
}
</script>

HTML

<p>direction:
 <button onclick="setDirection('ltr');">ltr</button>
 <button onclick="setDirection('rtl');">rtl</button>
 <button onclick="setDirection('inherit');">inherit</button>
</p>
<p>サンプル要素のdirectionプロパティの値:<span id="sampleOutputDirection"></span></p>
<p>unicodeBidi:
 <button onclick="setUnicodeBidi('normal');">normal</button>
 <button onclick="setUnicodeBidi('embed');">embed</button>
 <button onclick="setUnicodeBidi('bidi-override');">bidi-override</button>
 <button onclick="setUnicodeBidi('inherit');">inherit</button>
</p>
<p>サンプル要素のunicode-bidiプロパティの値:<span id="sampleOutputUnicodeBidi"></span></p>
<div id="sample" style="padding: 10px; border: 1px solid red; background-color: yellow;">
 サンプル要素
</div>

スポンサード リンク

カテゴリー: DOM, JavaScript, Styleオブジェクト, テキスト, プロパティ, リファレンス パーマリンク