已解決430363個問題，去搜搜看，總會有你想問的

從輸入更改 strokeStyle 值

首頁猿問從輸入更改 strokeStyle 值

從輸入更改 strokeStyle 值

JavaScript

明月笑刀無情 2022-12-22 12:00:22

我正在使用 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>

<label for="brushcolor">change eventlistener</label>

<br />

<label for="brushcolor2">input eventlistener</label>

</div>

</body>

</html>

反對回復 2022-12-22

1 回答
0 關注
85 瀏覽

關注

添加回答

舉報

0/150

提交

取消

亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

熱搜

最近搜索清空

從輸入更改 strokeStyle 值

從輸入更改 strokeStyle 值

1 回答

添加回答