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