文字色を変更する
文字色を変更するデモです。
ボタンをクリックすると、ボタン横の文字が赤色に変更されます。サンプルコードは、以下の通りです。
【文字色を変更するサンプルコード】
<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プロパティを記述しておけば、文字色だけでなく他のスタイルも一度に変更する事が出来ます。