「JavaScript」カラーボタンで色の値を取得して背景の色を設定する

2022年8月3日

環境

Windows 10 home 64bit
Google Chrome 103.0.5060.134

構文

<input type="color" id="カラーボタンID名" />
const 変数名 = document.getElementById("カラーボタンID名");

変数名.addEventListener(“change", 関数名);
addEventListener() は EventTarget インターフェイスのメソッドで、ターゲットに特定のイベントが配信されるたびに呼び出される関数を設定します。

使用例

<!DOCTYPE html>
<html>
<body>

<label>背景の色を指定 <input type="color" id="cftcolor" /></label>

<script>
  const cr = document.getElementById("cftcolor");
  cr.addEventListener("change", chgColor);

  function chgColor() {
    document.body.style.background = cr.value;
  }
</script>

</body>
</html>

結果
カラーボタンで色(例緑)を指定して画面の背景全体の色(緑)を変更します。

JavaScript

Posted by arkgame

関連記事: