style.unicodeBidiプロパティ

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

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

構文

取得

var $unicodeBidi = $elementReference.style.unicodeBidi;

戻り値

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

設定

$elementReference.style.unicodeBidi = "normal | embed | bidi-override | inherit";
normal | embed | bidi-override | inherit
下記の何れかの値を指定する。初期設定値は、「normal」。
  • normal:Unicodeによる各言語の書式の方向に従う。
  • embed:Unicodeによる各言語の書式に、style.directionプロパティに指定した値を埋め込む。文字の並び方は変わらない。
  • bidi-override:Unicodeによる各言語の書式を、style.directionプロパティに指定した値で上書きする。文字の並び方も変わる。
  • 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オブジェクト, テキスト, プロパティ, リファレンス パーマリンク