答案：通过html、css和javaScript实现一个轻量级颜色选择器，用户点击预设色块即可选中颜色并实时显示。结构上使用div容器与data-color属性存储颜色值，javascript通过事件委托监听点击，动态更新选中状态及显示区域文本，CSS则美化界面，提供选中反馈效果，整体简洁可复用，适合嵌入小型项目。
实现一个简单的颜色选择器，核心目标是让用户能直观地选择颜色，并获取所选颜色值。我们可以通过原生 JavaScript 和 HTML 配合 CSS 来构建一个轻量、可复用的 ui 组件，无需依赖第三方库。
基本结构：HTML 容器与色块网格
使用一个容器来展示多个颜色块，每个色块代表一种预设颜色。用户点击色块即可选中颜色。
<div id="color-picker"> <div class="color-option" data-color="#ff0000" style="background: #ff0000;"></div> <div class="color-option" data-color="#00ff00" style="background: #00ff00;"></div> <div class="color-option" data-color="#0000ff" style="background: #0000ff;"></div> <div class="color-option" data-color="#ffff00" style="background: #ffff00;"></div> <div class="color-option" data-color="#ff00ff" style="background: #ff00ff;"></div> <div class="color-option" data-color="#00ffff" style="background: #00ffff;"></div> </div> <div id="selected-color">选中的颜色：</div>
交互逻辑：JavaScript 监听点击事件
通过事件委托监听颜色块的点击，获取 data-color 属性值，并更新当前选中状态和显示区域。
const colorPicker = document.getElementById('color-picker'); const selectedDisplay = document.getElementById('selected-color'); // 初始化选中第一个颜色 let currentColor = colorPicker.querySelector('.color-option').dataset.color; // 设置初始显示 selectedDisplay.textContent = '选中的颜色：' + currentColor; colorPicker.addEventListener('click', function(e) { if (e.target.classlist.contains('color-option')) { const newColor = e.target.dataset.color; // 移除之前选中状态 colorPicker.querySelector('.selected')?.classList.remove('selected'); // 添加新选中状态 e.target.classList.add('selected'); // 更新当前颜色并显示 currentColor = newColor; selectedDisplay.textContent = '选中的颜色：' + currentColor; // 可触发回调函数（用于外部集成） if (typeof onColorChange === 'function') { onColorChange(newColor); } } });
样式美化：CSS 添加视觉反馈
为颜色块添加边框、大小和选中效果，提升用户体验。
立即学习“Java免费学习笔记（深入）”；
#color-picker { display: flex; gap: 8px; padding: 10px; flex-wrap: wrap; } .color-option { width: 40px; height: 40px; border-radius: 50%; cursor: pointer; border: 2px solid #ccc; } .color-option.selected { border: 3px solid #000; transform: scale(1.1); box-shadow: 0 0 5px rgba(0,0,0,0.3); }
这样就完成了一个基础但实用的颜色选择器组件。你可以扩展它，比如支持自定义颜色列表、添加透明度选项、或集成 input[type=color] 实现更丰富的功能。基本上就这些，简单直接，适合嵌入到各种小项目中。