从输入更改 strokeStyle 值
我正在使用 vanilla Javascript 创建简单的绘图应用程序。我当前的问题是我正在尝试从输入中更改 strokeStyle 值，但不知道该怎么做。我试图通过 CSS 根值来做到这一点，但如果有另一种简单的方法来做到这一点，我愿意尝试一下。
<div class="optioninputs">
<label for="brushcolor"></label>
<input id="brushcolor" type="color" name="brushcolor" value="#000000">
</div>
这是我的 HTML 代码和我要更改的输入值。
:root {
--brushcolor: #000000;
}
CSS 根值。
// Get brushcolor root value
const brushElement = document.getElementById('brushcolor');
const brushColor = getComputedStyle(brushElement). getPropertyValue('--brushcolor');
context.strokeStyle = brushColor;
本身就有问题。这从 CSS 获取了正确的根值，但是如何从 Javascript 更改该根值？
编辑：
brushElement.addEventListener('change', (e) => {
document.documentElement.style.setProperty('--brushcolor', e.target.value);
});
我试过这个但没用
明月笑刀无情浏览 60回答 1
1回答
-
芜湖不芜
这似乎工作正常。也许您想要“输入”事件而不是“更改”？该input事件将立即更改它只有在您单击颜色选择器外部后，该事件才会更改它change如果你想使用这个颜色值，你可以简单地将它分配给一个变量context.strokeStyle = e.target.value;document.getElementById('brushcolor').addEventListener('change', e => { document.documentElement.style.setProperty('--brushcolor', e.target.value);});document.getElementById('brushcolor2').addEventListener('input', e => { document.documentElement.style.setProperty('--brushcolor', e.target.value);});:root { --brushcolor: #000000;}.variablebackground { background-color: var(--brushcolor); width: 200px; height: 100px;}<html><body> <div class="variablebackground"></div> <div class="optioninputs"> <label for="brushcolor">change eventlistener</label> <input id="brushcolor" type="color" name="brushcolor" value="#000000"> <br /> <label for="brushcolor2">input eventlistener</label> <input id="brushcolor2" type="color" name="brushcolor2" value="#000000"> </div></body></html>
随时随地看视频慕课网APP
相关分类
JavaScript