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

标签 javascript html colors html5-canvas onchange

我正在开发一个网络应用程序,它需要根据 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/

相关文章:

javascript - Ember.js {{render}} 助手模型设置不正确

javascript - Vue.js 错误的变量得到更新

javascript - 在用户脚本中编辑音频元素音量

c# - WebCamTexture 在第一秒或第二秒出现全 0

javascript 两种颜色重复效果

javascript - 向具有特定类的 div 的所有子项添加类不起作用

html - 行与行之间的 IE 空间

html - CSS 样式。在链接前放一个箭头图像

html - 为什么添加 Image 会改变父级 <div> 或 <span> 的位置?

qt - 在考虑样式表属性的情况下在paintEvent 中绘制Qt 控件