文字色の変更/JavaScript

JavaScriptで、HTML中の文字色を変更するサンプルコードです。

styleプロパティを使って直接変更する方法と、クラスを使って変更する方法を説明しています。

目次は、以下の通りです。

  1. 文字色を変更する
  2. 時間が経過すると動的に文字色を変更する
  3. クラスによって文字色を変更する

文字色を変更する

 文字色を変更するデモです。

テスト

 ボタンをクリックすると、ボタン横の文字が赤色に変更されます。サンプルコードは、以下の通りです。

【文字色を変更するサンプルコード】
<form>
<button type="button" onclick="func1();">変更</button>
<span id="test1">テスト</span>
</form>

<script>
function func1() {
    var x = document.getElementById("test1");
    x.style.color = "red";
}
</script>

 ボタンがクリックされるとfunc1が呼び出され、赤字分部でstyleプロパティを使って文字色が赤に変更されます。

時間が経過すると動的に文字色を変更する

 以下の文字色は、10秒単位で自動で変更されます。

テスト

 サンプルコードは、以下の通りです。

【時間が経過するとランダムに文字色を変更するサンプルコード】
<span id="test2">テスト</span>

<script>
setInterval(func2,10000);

function func2() {
    var x = document.getElementById("test2");
    var ran1 = Math.ceil( Math.random() * 255 );
    var ran2 = Math.ceil( Math.random() * 255 );
    var ran3 = Math.ceil( Math.random() * 255 );
    var y = "rgb(" + ran1 + "," + ran2 + "," + ran3 + ")"
    x.style.color = y;
}
</script>

 赤字分部で10秒毎に関数func2を呼び出します。時間はms単位で指定します。

 ran1〜3にランダムな数字を入れ、青字部分でその数字を使ってrgbを書き換えています。このため、10秒単位に文字色がランダムに変更されます。

 switch文で条件分岐して、明示的に色を指定する事も出来ます。サンプルコードは、以下の通りです。

【時間が経過すると指定した文字色に順番に変更するサンプルコード】
<span id="test2" style="color:black;">テスト</span>

<script>
setInterval(func2,10000);

function func2() {
    var x = document.getElementById("test2");
    switch (x.style.color) {
        case "black":
            x.style.color = "red";
            break;
        case "red":
            x.style.color = "blue";
            break;
        case "blue":
            x.style.color = "black";
    }
}
</script>

 switch文により、現在の文字色が黒であれば赤というように、決められた順に変更されます。

クラスによって文字色を変更する

 以下のように、クラスを適用する事で文字色を変更する事も出来ます。

【クラスを使って文字色を変更するサンプルコード】
<style type="text/css">
.red { color:red; }
</style>

<form>
<button type="button" onclick="func3();">変更</button>
<span id="test3">テスト</span>
</form>

<script>
function func3() {
    var x = document.getElementById("test3");
    x.className = "red";
}
</script>

 赤字分部で文字色を赤にするクラスredを作成しています。青字部分で、クラスredを適用しています。このため、ボタンをクリックすると、クラスredが適用されて文字色が赤に変更されます。

 この方法は、同じクラスにmargin等別のCSSプロパティを記述しておけば、文字色だけでなく他のスタイルも一度に変更する事が出来ます。

  • このエントリーをはてなブックマークに追加