上記のように、
<input type=”range” id=”w” min=”50″ max=”500″ onchange=”doChange();”><br>
<input type=”range” id=”h” min=”50″ max=”500″ onchange=”doChange();”><br>
onchangeを使って、関数を呼び出す。
onchangeはスライダーを動かして変更があったらすぐに関数が呼び出され、その変更された値が関数内で変数に代入され、id=”msg”のDOMオブジェクトのstyleプロパティに反映される。
コードは単純だが、リアルタイムに結果が反映されるので分かり易くおもしろい。
別途のRGB SLIDERと組み合わせてもおもしろい。
<script type="text/javascript" src="change.js"></script>ちなみに、コピペする時上記のはコードをご自身の環境に合わせて下さい。
コメント