我正在开发一个网络应用程序,它需要根据 colorpicker
的值更改 HTML canvas
的颜色。
我有一个 HTML 格式的 colorpicker
,我需要在每次更新时从中获取 value
。
<input type="color" value="#ff0800" id="color">
目前,这是与我的 javascript 文件中的 colorpicker
关联的代码。
var backRGB = document.getElementById("color").value;
我真的不确定这是如何实现的。
我已经尝试过其他堆栈交换问题,但没有一个真正满足我的要求,所以如果有人能告诉我如何实现,我将不胜感激。
最佳答案
除了已经给出的答案之外,我们还可以附加 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;
});
希望对广大用户有所帮助。
关于javascript - HTML colorpicker 发生变化时如何获取新值?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50836844/