style.textAlignプロパティ

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

text-alignプロパティは、テキストの水平方向の配置を指定することができる。

構文

取得

var $textAlign = $elementReference.style.textAlign;

戻り値

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

設定

$elementReference.style.textAlign = "left | right | center | justify | inherit";
left | right | center | justify | inherit
下記の何れかの値を指定する。初期設定値は「left」。
  • left:左揃え。
  • right:右揃え。
  • center:中央揃え。
  • justify:両端揃え。
  • inherit:親要素の設定を継承。

サンプル


サンプルのtext-alignプロパティの値:

Sample Element Sample Element Sample Element
サンプル要素

サンプルの動作について

各ボタンをクリックすると、ボタン名のテキストを「text-alignプロパティ」の値に設定する。設定値を「サンプルのtext-alignプロパティの値:」の右横に表示する。「Sample Element <br /> サンプル要素」を指定した行間で表示する。

  • 「left」ボタンをクリックすると、サンプル要素内のテキストを左揃えにする。「サンプルのtext-alignプロパティの値:」の右横に「left」と表示する。
  • 「right」ボタンをクリックすると、サンプル要素内のテキストを右揃えにする。「サンプルのtext-alignプロパティの値:」の右横に「right」と表示する。
  • 「center」ボタンをクリックすると、サンプル要素内のテキストを中央揃えにする。「サンプルのtext-alignプロパティの値:」の右横に「center」と表示する。
  • 「justify」ボタンをクリックすると、サンプル要素内のテキストを両端揃えにする。一行目の「Sample Element Sample Element」の両端が揃っている点に注目。「サンプルのtext-alignプロパティの値:」の右横に「justify」と表示する。
  • 「inherit」ボタンをクリックすると、親要素の設定を継承する。「サンプルのtext-alignプロパティの値:」の右横に「inherit」と表示する。

サンプルのソースコード

JavaScript

<script type="text/javascript">
function setTextAlign( $textAlign ) {
 var $element = document.getElementById( "sample" );
 $element.style.textAlign = $textAlign;
 var $textAlign = $element.style.textAlign;
 document.getElementById( "sampleOutput" ).innerHTML = $textAlign;
}
</script>

HTML

<button onclick="setTextAlign('left');">left</button>
<button onclick="setTextAlign('right');">right</button>
<button onclick="setTextAlign('center');">center</button>
<button onclick="setTextAlign('justify');">justify</button>
<button onclick="setTextAlign('inherit');">inherit</button>
<br />
<p>サンプルのtext-alignプロパティの値:<span id="sampleOutput"></span></p>
<p id="sample" style="width: 300px; font-size: 16px; border: 1px solid red; background-color: yellow;">
 Sample Element Sample Element Sample Element <br /> サンプル要素
</p>

スポンサード リンク

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