javascript - HTML colorpicker 发生变化时如何获取新值？

Question

我正在开发一个网络应用程序，它需要根据 colorpicker 的值更改 HTML canvas 的颜色。

我有一个 HTML 格式的 colorpicker，我需要在每次更新时从中获取 value。

<input type="color" value="#ff0800" id="color">

目前，这是与我的 javascript 文件中的 colorpicker 关联的代码。

var backRGB = document.getElementById("color").value;

我真的不确定这是如何实现的。

我已经尝试过其他堆栈交换问题，但没有一个真正满足我的要求，所以如果有人能告诉我如何实现，我将不胜感激。

Answer 1

除了已经给出的答案之外，我们还可以附加 oninput 事件处理程序而不是 onchange 事件。这是我们监控用户颜色选择器事件的另一种方式。

此事件类似于onchange 事件。不同之处在于 oninput 事件在元素值更改后立即发生，而 onchange 事件在元素失去焦点时发生，在内容已更改后发生。另一个区别是 onchange 事件也适用于元素。这是一个例子:

const backRGB = document.querySelector(".backRCB");
const color = document.querySelector(".color");

color.addEventListener("input",(event)=>{
   backRGB.style.backgroundColor = color.value;
   // You can also do it with the event object as event object holds the value of the current color
   //  backRGB.style.backgroundColor = event.target.value;
});

希望对广大用户有所帮助。