如何用JavaScript实现一个颜色选择器_如何捕获和处理颜色值？

最简单方式是直接使用HTML5的input[type="color"]，浏览器自动渲染系统级选择器；默认值需为7位十六进制（如"#ff0000"），支持input/change事件，value始终返回标准#rrggbb格式。

用原生input type="color"快速实现颜色选择器

最简单的方式是直接使用HTML5的input元素，设置type="color"。浏览器会自动渲染为系统级颜色选择器（如Chrome显示色轮+调色板），无需额外JS库。

关键点：

• 默认值必须是7位十六进制格式（如"#ff0000"），不能用简写"#f00"或rgb()等格式，否则可能回退为黑色
• 支持change和input事件：前者在选完后触发，后者在拖动/实时调整时连续触发
• 获取颜色值直接读取input.value，始终返回标准#rrggbb格式

监听颜色变化并处理值

给input绑定事件，就能实时捕获用户选择的颜色。常用场景包括预览、存入配置、更新样式等。

示例代码：

立即学习“Java免费学习笔记（深入）”；

const colorInput = document.querySelector('input[type="color"]');
colorInput.addEventListener('input', (e) => {
  const hex = e.target.value; // 如 "#3a86ff"
  document.body.style.backgroundColor = hex;
  console.log('当前颜色：', hex);
});

登录后复制

注意：input事件比change更灵敏，适合做实时反馈；若只需最终结果，用change即可。

标签： css javascript java html js html5 浏览器