javascript - Html 将文本颜色设置为色轮

Question

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

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

在此色轮上选择的值:

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

如果色轮的值发生变化，文本应该进行调整，以便将颜色设置为色轮的值，如何做到这一点？

Answer 1

这只是更新输入文本 onchange 样式的问题。

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

定义JS方法获取input的值并设置文本样式。

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>