JavaScriptでのdata-属性を通じたスタイルの切り替え

前のレッスンで説明した問題を解決するために、要素にクラスを設定する代わりに、 data-属性の値を変更します。この方法の便利な点は、そのような属性は一つの値しか持つことができず、新しい値を書き込むと古い値が自動的に上書きされることです。

例えば、以下のようにして成功スタイルを設定します：

<div id="elem" data-type="success">
	text
</div>

エラー用のスタイルは以下の通りです：

<div id="elem" data-type="error">
	text
</div>

各状態のスタイルは属性セレクタを使用して設定します：

[data-type="success"] {
	color: green;
}
[data-type="warning"] {
	color: orange;
}
[data-type="error"] {
	color: red;
}

これで、簡単に要素を成功色に変更できます：

elem.dataset.type = 'success';

エラー色に変更するには以下のようにします：

elem.dataset.type = 'error';

入力欄があります。フォーカスが外れたときに、入力された数値をチェックしてください。もしその数値が10以下なら、入力欄を緑色に、 10から20なら黄色に、 20より大きいなら赤色に変えてください。