文字揃えと字下げ[DOM]JavaScript入門

1. HOME
2. JavaScript入門
3. 文字揃えと字下げ[DOM]

前のページではDOMによるフォントの操作について解説しましたが、 今度は段落の操作について解説します。 具体的には文字揃えとインデントの設定を扱います。

<form>
<input type="button" value="左揃え" onclick="txtalign(0)">
<input type="button" value="中央揃え" onclick="txtalign(1)">
<input type="button" value="右揃え" onclick="txtalign(2)">
<input type="button" value="両端揃え" onclick="txtalign(3)">
</form>

<p id="soroe">
ここの段落の文字を、左揃え・右揃え・中央揃え・両端揃えに変更します。
変更するには、document.getElementById().style.textAlignを使います。</p>

<script>

function txtalign(num)
{
  //document.getElementByIdが使えるか確認
  if( document.getElementById )
  {

    //id属性の付いたタグを変数に格納
    var obj = document.getElementById("soroe");

    //switch文で文字揃え方法を分岐
    switch( num )
    {
      case 0 : obj.style.textAlign = "left";   break;
      case 1 : obj.style.textAlign = "center"; break;
      case 2 : obj.style.textAlign = "right";  break;
      case 3 : obj.style.textAlign = "justify";break;
    }
  }
}
</script>

<form>
<input type="button" value="字下げ無" onclick="pIndent(0)">
<input type="button" value="字下げ有" onclick="pIndent(1)">
<input type="button" value="50px下げ" onclick="pIndent(2)">
</form>

<p id="jisage">ここの段落の先頭を字下げします。
字下げはtextpIndentを使います。インデント幅は文字数だけでなく、
ptやpxも使えます。マイナス値を指定すれば前に飛び出します。</p>

<script>

function pIndent(num)
{
  //document.getElementByIdが使えるか確認
  if( document.getElementById )
  {

    //id属性の付いたタグを変数に格納
    var obj = document.getElementById("jisage");

    //switch文で字下げ方法を分岐
    switch( num )
    {
      case 0 : obj.style.textIndent = "0em";  break;
      case 1 : obj.style.textIndent = "1em";  break;
      case 2 : obj.style.textIndent = "50px"; break;
    }
  }
}

</script>