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>
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>
<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>