フォント全般[DOM]－JavaScript入門

HOME
JavaScript入門
フォント全般[DOM]

このページでは、DOMでフォントや文字サイズ等を変更する方法について見ます。文章中のある一部分だけ目立たしたい時などに使うことができます。

フォント変更のサンプルスクリプト

では以下のフォームとスクリプトを、HTMLのBODY内に記入してみてください。

<form>
<input type="button" value="Timesにする" onclick="chgFont(0)">
<input type="button" value="Arialにする" onclick="chgFont(1)">
<input type="button" value="太字にする" onclick="chgFont(2)">
<input type="button" value="太字を戻す" onclick="chgFont(3)">
<input type="button" value="斜体にする" onclick="chgFont(4)">
<input type="button" value="斜体を戻す" onclick="chgFont(5)">
<input type="button" value="36ptにする" onclick="chgFont(6)">
<input type="button" value="12ptにする" onclick="chgFont(7)">
</form>

<div id="fontdisp">JavaScript</div>


<script>

function chgFont(num)
{
  if (document.getElementById)
  {
    //document.getElementByID("id名")の省略
    var obj=document.getElementById("fontdisp");
    
    switch(num)
    {
     //フォントの変更 
     case 0: obj.style.fontFamily = "Times"; break;
     case 1: obj.style.fontFamily = "Arial"; break;

     //太字のON･OFF 
     case 2: obj.style.fontWeight = "bold"; break;
     case 3: obj.style.fontWeight = "normal"; break;

     //斜体のON･OFF 
     case 4: obj.style.fontStyle = "italic"; break;
     case 5: obj.style.fontStyle = "normal"; break;

     //サイズの変更 
     case 6: obj.style.fontSize = "36pt"; break;
     case 7: obj.style.fontSize = "12pt"; break;
    }
  }
}

</script>

＜サンプル＞

JavaScript

（上記サンプルのdivタグには、スタイルシートでオリーブ色の枠を付けて、中央に文字揃えし、フォントを12ptにしています）。

スクリプトの解説

HTML部分

フォームには8つボタンを設置しています。どのボタンも関数chgFont()を呼び出します。動作を分岐させるために引数を用いています。

divタグにはid属性を付けます。今回は「fontdisp」というid名を付けました。

DOMが使用可能か確認

関数chgFont()の最初に、if文でDOMが使用可能か確認しています。 document.getElementByIdが使えれば、以下の処理を行います。

document.getElementById()の省略

続いて変数objにid属性の付いたdivタグの情報を代入しておきます。こうすれば毎回document.getElementById()を書かずに済みます。

引数により処理を分岐

switch文を使って、処理を分岐します。分岐条件は、関数chgFont()の引数です。 0と1は書体の変更、2,3は太字のON/OFF、4,5は斜体のON/OFF、6,7は文字サイズの変更です。

DOMによるフォント等の変更は、以下のようになっています。

document.getElementById("id名").style.fontFamily: 書体を変更します。右辺に該当するフォント名を記入します。
document.getElementById("id名").style.fontWeight: 太字のOn/OFFを設定します。「bold」で太字、「normal」で解除です。
document.getElementById("id名").style.fontStyle: 斜体のON/OFFを設定します。「italic」で斜体、「normal」で解除です。
document.getElementById("id名").style.fontSize: フォントのサイズを変更します。

case文の最後はbreakを忘れずに入れます。

下線のON/OFFについては、また別のページにて解説します。今回はfont○○という命令で変更できるものを扱いましたが、下線はまた別の命令文になるので、分けて扱いたいと思います。

前へ次へ