Html将文本颜色设置为色轮

【问题标题】：Html set text color to colorwheelHtml将文本颜色设置为色轮
【发布时间】：2021-11-29 17:40:51
【问题描述】：

我想知道如何设置此文本的颜色：

<p style="font-size: 30px; color: #222;" class="txt>Text example</p>

到此色轮上选择的值：

<input type="color" value="#f6f82" id="colorPicker">

如果色轮的值发生变化，文字应该调整，使颜色设置为色轮的值，如何做到这一点？

【问题讨论】：

标签： javascript html css colors

【解决方案1】：

只需更新输入的文本onchange的样式即可。

将onchange 属性添加到可以调用JavaScript 方法的input 字段。

定义JS方法从输入中获取值并设置文本样式。

const setTextColor = (value) => {
    document.querySelector('.txt').style.color = value;
};

<input type="color" value="#f6f82" id="colorPicker" onchange=setTextColor(value)>
<p style="font-size: 30px; color: #222;" class="txt">Text example</p>

【讨论】：

完美运行，谢谢！