我正在使用 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 valueconst 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);});我试过这个但没用
1 回答
芜湖不芜
TA贡献1796条经验 获得超7个赞
这似乎工作正常。也许您想要“输入”事件而不是“更改”？
该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>
添加回答
举报
0/150
提交
取消