如何用原生JS手动修改<input type="color">的实际显示颜色？

嘿，这个需求用原生JS处理超简单，完全不用依赖任何库！你要的核心操作其实就是直接给<input type="color">元素的value属性赋值标准的十六进制颜色值就行，color输入框会自动同步显示对应的颜色。

具体实现步骤 #

1. 先写一个生成随机十六进制颜色的函数（确保生成的是6位合法格式，避免color输入框不识别）
2. 给你的“随机生成”按钮绑定点击事件，在事件回调里生成随机颜色，然后赋值给对应的颜色输入框

完整代码示例 #

假设你的DOM结构是这样的：

<input type="color" id="colorInput1">
<input type="color" id="colorInput2">
<button id="randomBtn">随机生成</button>

对应的原生JS代码：

// 生成标准6位十六进制随机颜色
const getRandomHexColor = () => {
  return `#${Math.floor(Math.random() * 0xFFFFFF).toString(16).padStart(6, '0')}`;
};

// 给随机按钮绑定点击事件
document.getElementById('randomBtn').addEventListener('click', () => {
  // 给两个颜色输入框赋值，同步显示随机颜色
  document.getElementById('colorInput1').value = getRandomHexColor();
  document.getElementById('colorInput2').value = getRandomHexColor();
});

关键说明 #

• 你之前看到的jQuery代码$("#test").val("#ff66ff");，对应的原生JS写法就是document.getElementById('test').value = '#ff66ff';，是不是非常直观？
• 一定要确保颜色值是6位十六进制格式（带#前缀），如果生成的随机数转十六进制后不足6位，用padStart(6, '0')补全，这样color输入框才能正确识别并显示颜色。
• 赋值后输入框会立刻更新显示的颜色，用户也能直接点击输入框修改颜色，完全满足你的需求～

内容的提问来源于stack exchange，提问作者bashka