web

Size Change

更新日:

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と組み合わせてもおもしろい。

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

-web

Copyright© exarow , 2018 All Rights Reserved Powered by AFFINGER5.