JavaScriptのDOMで文字揃えとインデントを設定する方法について解説

HOME
更新日:2017.03.02
HOMEJavaScript入門 > 文字揃えと字下げ[DOM]

文字揃えと字下げ[DOM]

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

文字揃えを操るサンプルスクリプト

文字揃えを操るDOMのスクリプトです。HTMLのBODY内に記入してみてください。

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

<サンプル>

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


スクリプト全般の解説は前ページとほぼ同じなので割愛します。 文字揃えを指定するにはtextAlignを使います。

document.getElementById("id名").style.textAlign
段落の文字揃え方法を指定します。左揃えは「left」、 右揃えが「right」、中央揃えは「center」、両端揃えは「justify」です。

字下げを操作するサンプルスクリプト

字下げ(インデント)を操るDOMのスクリプトです。HTMLのBODY内に記入してみてください。

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

<サンプル>

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


ここでもスクリプトの説明は割愛させて頂きます。 文字の字下げを操作するには、textpIndentを使います。

document.getElementById("id名").style.textpIndent
字下げを設定します。値はem(文字幅)やpt,pxが使えます。