如何在不单击按钮的情况下使用颜色选择器更改背景颜色？

Question

我想使用颜色选择器更改背景颜色，而无需单击更改颜色按钮。我想要的是在颜色选择器中选择 RGB 时更改背景颜色。

function changecolor(){
  let color = document.getElementById('colorpicker').value;
  document.body.style.backgroundColor = color;
  
}

<input id = "colorpicker" type = "color">
  <button onclick = "changecolor();"> change Color </button>

Answer 1

您可以在颜色选择器上添加 onchange 事件，这样您的函数就会被调用，然后只需更改背景颜色即可。

演示代码 :

function changecolor(el) {
  document.body.style.backgroundColor = el.value;
}

<input id="colorpicker" type="color" onchange="changecolor(this)">

Answer 2

document.getElementById("colorpicker").addEventListener("change", function() {
  document.body.style.backgroundColor = this.value;
});

<input id = "colorpicker" type = "color">

Answer 3

使用这个。

let colorpicker = document.getElementById('colorpicker');



  setInterval(()=>{
      let color = colorpicker.value;
      document.body.style.backgroundColor = color;
  }, 200);

  <input id = "colorpicker" type = "color" value="#ffffff">
    <button onclick = "changecolor();"> change Color </button>

如何在不单击按钮的情况下使用颜色选择器更改背景颜色？

How to change background color using color picker without click on button?

html

javascript

css

jquery

color-picker