| ポイント |
<![CDATA[
if (n < 10)
{
fObj.result.className = "iro2";
}else{
fObj.result.className = "iro1";
}
]]>
|
| 説 明 |
計算結果によってテキストフィールドの背景色を変えるには、スタイルシートのbackgroundColorプロパティにカラーコードまたはカラー名を指定する方法と、あらかじめスタイルシートで定義されているクラス名を指定する方法があります。このサンプルではクラス名を変更することによりテキストフィールドの背景色を変化させています。クラスを切り替えるにはオブジェクトのclassNameプロパティに設定したいクラス名を文字列として指定します。 |
| サンプル |
<![CDATA[
<html>
<head>
<title>計算結果によってテキストフィールドの背景色を変える</title>
<style type="text/css"><!--
.iro1 { background-color:#e0e0ee; }
.iro2 { background-color:#ff0000; }
--></style>
<script language="JavaScript"><!--
function calc(fObj)
{
n1 = eval(fObj.num1.value);
n2 = eval(fObj.num2.value);
n = n1 + n2;
fObj.result.value = n;
if (n < 10)
{
fObj.result.className = "iro2";
}else{
fObj.result.className = "iro1";
}
}
// --></script>
</head>
<body>
<form>
２つの値の加算結果によって結果の欄の背景色をかえます。<br>
(10未満は赤色になります)<br>
値１：<input type="text" name="num1"><br>
値２：<input type="text" name="num2"><br>
結果：<input type="text" name="result"><br>
<input type="button"value="計算する" onClick="calc(this.form)">
</form>
</body>
</html>
]]>
|
| 補足説明 |
なし |
|
■サンプルスクリプトを実行する >>実行
■各ブラウザでの動作結果を見る >>View!
|
計算結果によってテキストフィールドの背景色を変える