Size Change

web

See the Pen eWaYYV by nuto (@exarow) on CodePen.

上記のように、

<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>

ちなみに、コピペする時上記のはコードをご自身の環境に合わせて下さい。

コメント

タイトルとURLをコピーしました