如何实现HTML文本颜色与colorwheel取色器选中值同步变更？

你提供的初始代码存在两处笔误，需要先修正保证基础功能正常：

• <p>标签的class属性缺少闭合双引号
• 取色器默认色值#f6f82为5位十六进制格式，不符合标准色值规范，可调整为6位格式例如#f6f822

原生JavaScript实现方案（无需第三方依赖） #

直接通过事件监听实现实时同步，完整可运行代码如下：

<!-- 修正后的文本标签 -->
<p style="font-size: 30px; color: #222;" class="txt">Text example</p>
<!-- 修正后的取色器标签 -->
<input type="color" value="#f6f822" id="colorPicker">

<script>
// 读取对应的DOM元素
const textElement = document.querySelector('.txt')
const colorPicker = document.querySelector('#colorPicker')

// 绑定取色器实时变化事件，拖动选色时就同步更新文本颜色
colorPicker.addEventListener('input', () => {
  textElement.style.color = colorPicker.value
})

// 可选：页面加载完成后直接同步取色器默认色值到文本，避免初始色不一致
textElement.style.color = colorPicker.value
</script>

可选调整 #

如果不需要拖动选色时实时同步，只需要用户选完颜色释放鼠标后再更新，把事件名从input替换为change即可。

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