使用原生<input type="color">监听input事件，实时获取value并设置目标元素style.backgroundColor，同时更新<output>显示颜色值。
用 DOM 操作实现一个基础颜色选择器，核心是监听用户输入（如 <input type="color"> 或自定义色块点击），实时更新目标元素的样式（比如背景色或文字颜色），同时可同步显示颜色值。不需要框架，纯 JavaScript 就能完成。
1. 使用原生 color 输入框 + DOM 更新
最简方式是利用浏览器自带的 <input type="color">，它会触发 input 事件，DOM 操作只需读取其 value 并设置到目标元素：
- 获取 input 元素和要变色的目标元素（如一个 div）
- 监听
input事件（比change更及时，拖动时也响应） - 把
event.target.value赋给目标元素的style.backgroundColor或其他样式属性 - 可选：把颜色值写入一个
<span>或<output>实时展示
2. 点击色块切换颜色（模拟调色板）
若想用预设色块（如常用色按钮），可用一组 <button> 或 <div>，每个设置 data-color 属性存颜色值：
- 给所有色块添加统一 class（如
color-swatch），用document.querySelectorAll获取 - 遍历绑定
click事件，从event.target.dataset.color读取颜色 - 更新目标元素样式，并同步更新显示区域的文本内容（如
textContent = color） - 可加一句
event.target.classList.add("active")高亮当前选中项，同时移除其他项的 active 类
3. 实时反馈与防错处理
交互体验的关键在于即时、稳定：
Alibabacloud Sdk Client Initialization For Java
下载
在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。
立即学习“Java免费学习笔记（深入）”；
- 确保目标元素存在再操作，避免
Cannot set property 'backgroundColor' of null - 颜色值始终为合法格式（
input[type=color]默认返回如"#ff0000"，可直接使用；手动传值需校验是否以#开头或为英文关键词如"red"） - 更新颜色后，顺带更新
<input type="color">的value，保持控件状态同步 - 如果支持透明度，改用
rgba()并搭配 range 输入框，但注意input[type=color]不支持 alpha，需额外处理
4. 完整小示例（可直接运行）
HTML 中放一个 color 输入框、一个显示区域、一个预览 div：
<input type="color" id="colorPicker" value="#4a90e2"><output id="colorValue">#4a90e2</output>
<div id="preview" style="width:100px; height:100px; margin-top:10px;"></div>
JS 部分：
const picker = document.getElementById("colorPicker");const output = document.getElementById("colorValue");
const preview = document.getElementById("preview");
picker.addEventListener("input", (e) => {
const color = e.target.value;
output.textContent = color;
preview.style.backgroundColor = color;
});
