文字の色を変更する[DOM]JavaScript入門

文字色を変更するスクリプト

では文字色を変更してみます。 以下のスクリプトをHTMLのbody内に記入して見てください。

<div id="col">文字色が変わります</div>
<form>
<input type="button" value="赤文字" onclick="chgColor()">
</form>


<script type="text/javascript">
<!--

function chgColor()
{
  if(document.getElementById)
  {
    document.getElementById("col").style.color = "red";
  }
}
// -->
</script>

＜サンプル＞

様々なスタイルを変更するには、document.getElementById()の後にstyleを付け、 その後変更するスタイルを指定します。色を変更するには、colorを使います。

document.getElementById("id名").style.color =

文字色を変更します。右辺にはカラー名もしくはカラーコードを指定します。

文字を徐々に浮かび上がらせる

では文字色を変更するテクニックを使って、 徐々に文字を浮かび上がらせてみたいと思います。 映画のラストで「おわり」という文字が浮き上がって、その後消えるような演出がありますが、 それをDOMとタイマーで実装してみます。

<div id="end">おわり</div>
<form name="btn">
<input type="button" value="タイマー開始" onclick="tmStart()">
</form>

<style type="text/css">
<!--

div#end
{
  font-size:50pt;
  text-align:center;
  color:black;
  background-color:black;
  border:1px solid gray;
}  

-->
</style>

<script>

var cnt=0;
var timer1;

function tmStart()
{

  var col16,obj;
  
  if(document.getElementById)
  {
    //最初にボタンを押せなくする
    if (cnt == 0)
    {
      document.btn.elements[0].disabled=true;
    }

    //document.getElementById()の省略
    obj = document.getElementById("end");
    
    //最初の1.6秒で文字を黒→白に変更する
    if (cnt < 16)
    {
      col16 = cnt.toString(16);
      obj.style.color="#"+col16+col16+col16;
    }
    
    //3.2秒後に文字を白→黒に変更する
    if (cnt > 48)
    {
      col16 = (64-cnt).toString(16);
      obj.style.color="#"+col16+col16+col16;
    }
    
    cnt++;
    
    if (cnt <= 64)
    {
      //関数tmStart()を0.1秒間隔で呼び出す
      timer1=setTimeout("tmStart()",100);
    }
    else
    {
      //6.4秒後にタイマーを停止し、ボタンを押せるようにする
      clearTimeout(timer1);
      cnt=0;
      document.btn.elements[0].disabled=false;
    }
  }
}
</script>

スクリプトの説明

HTML部分

文字「おわり」をdivタグで囲い、id属性を付けます。id名は「end」にしました。 またフォームの中にボタンを一つ設置して、タイマーを起動させるようにしています。

スタイルシート部分

divタグのスタイルを指定しています。 divの後の「#」はidのことで、id名「end」が付いたdivタグのみスタイルを指定しています。 スタイルの意味合いは、上から順に以下のようになっています。

JavaScript部分

最初にグローバル変数cntとtimer1を宣言します。 変数cntは時間のカウントと共に、カラーコードに使う数値にも利用します。 変数timer1はタイマーをセットします。

関数tmStart()

関数tmStart()の最初に変数col16とobjを宣言しています。 変数col16はカラーコードに使う16進数の文字を入れます。 変数objはdocument.getElementById()を省略するために使います。

if(document.getElementById)

if文を使ってdocument.getElementByIdが使えるかどうか確認しています。 使用できる場合のみ、文字色を変える処理を続けます。

変数cntが0の時

cntが0の時、つまりボタンを押してすぐの状態の時に、ボタンを禁止状態にします。 タイマー稼働中にボタンを押すと不都合が生じるので、ボタンを押せなくするのです。

document.getElementById()を省略する

今回はdocument.getElementById("end")が2回出てくるので、 変数objに代入して省略できるようにします。

変数cntが16未満の時

変数cntが16未満の時は、文字色を黒（#000）から白（#FFF）に徐々に変更していきます。 文字色のコード部分は変数cntの数字を利用します。カラーコードは16進数で表すので、 toString(16)で16進数に変換し、変数col16に代入します。変数cntが15の時、 16進数に直すと「F」になります。 それで"#"+col16+col16+col16は「#FFF」ということになります。

変数cntが48より大きい時

変数cntが16～48の間は、色を変化させません。その後、色を徐々に消していきます。 カラーコードにすると、「#FFF」から「#000」に変更していきます。 (64-cnt).toString(16)とすることで、16段階を経てF→0になります。

変数cntを+1して繰り返す

色を変化させてから変数cntを+1し、setTimeout()を使って繰り返します。 繰り返し間隔は0.1秒（1秒で10回繰り返し）です。 つまり文字が完全に表示されるまで1.6秒、文字が変化しないのが3.2秒、 文字が消えていくのが1.6秒、合計6.4秒です。

完全に文字が消える（文字色が#000）のが、cnt=64の時です。 完全に文字が消えたらタイマーを停止し、カウント変数cntを0に戻し、 ボタンを押せるようにします。

このテクニックを使えば、文字色をグラデーションみたいに変化させることもできます。 いろいろと試してみると面白いと思います。