element.dirプロパティ

投稿日: 2013年8月17日 作成者: alphasis

element.dirは、「element」に指定した要素内のテキスト方向（dir属性の値）を取得、もしくは、設定するプロパティ。

構文

取得

var $dir = $elementNodeReference.dir;

戻り値

指定した要素内のテキスト方向。dir属性の値。

  • 要素内のテキスト方向が右から左であれば「ltr」を返す。
  • 要素内のテキスト方向が左から右であれば「rtl」を返す。

設定

$elementNodeReference.dir = "テキスト方向";
  • 要素内のテキスト方向を右から左に設定する場合、「ltr」を指定する。
  • 要素内のテキスト方向が左から右に設定する場合、「rtl」を指定する。

サンプル

id属性がsampleである要素内のテキスト方向：

サンプルの動作について

  • 「getDir()」ボタンをクリックすると、「id属性がsampleである要素内のテキスト方向：」の右横に、テキスト方向が右から左であれば「ltr」、テキスト方向が左から右であれば「rtl」と表示する。
  • 「changeDir()」ボタンをクリックすると、id属性がsampleである要素内のテキスト方向を逆にする。

サンプルのソースコード

JavaScript

<script type="text/javascript">
var $count = 1;
function getDir() {
 var $elementNodeReference = document.getElementById( "sample" );
 var $dir = $elementNodeReference.dir;
 document.getElementById( "sampleOutput1" ).innerHTML = $dir;
}
function changeDir() {
 var $elementNodeReference = document.getElementById( "sample" );
 var $dir = $elementNodeReference.dir;
 if( $dir == "ltr" ){
  $elementNodeReference.dir = "rtl";
  document.getElementById( "sampleOutput1" ).innerHTML = "";
 }else{
  $elementNodeReference.dir = "ltr";
  document.getElementById( "sampleOutput1" ).innerHTML = "";
 }
}
</script>

CSS

<style type="text/css">
#sample{
 height: 100px;
 width: 300px;
 padding: 10px;
 background-color: #fffee7;
 border: 1px solid #dddddd;
 border-radius: 5px;
}
</style>

HTML

<div id="sample" dir="ltr">
 <button onclick="getDir();">getDir()</button>
 <button onclick="changeDir();">changeDir()</button>
 <p>id属性がsampleである要素内のテキスト方向：<span id="sampleOutput1"></span></p>
</div>

スポンサード リンク

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