如何在HTML中设置文本颜色为颜色轮？

Question

我想知道如何设置这段文字的颜色:

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

使用此颜色选择器选定的值:

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

如果颜色选择器的值发生变化，文本应该调整使得颜色与颜色选择器的值相同。怎样才能实现这个目标？

- Aidan Young

Answer 1

只需要在输入框的 onchange 样式上进行更新即可。

向 input 标签添加 onchange 属性，它可以调用 JavaScript 方法。

定义 JavaScript 方法以获取输入值并设置文本样式。

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>

- ahsan