侃侃爾雅
2021-04-30 09:29:36
我有一個輸入字段,用戶應在其中輸入文本的顏色,他希望稍后再顯示該文本。我想知道,是否有一種方法可以使用javascript setProperty函數(shù)更改css變量,而不是值,該參數(shù)將是另一個javascript變量?例如:elem.style.setProperty('--my-css-variable', anotherJsVariable);
1 回答

白衣染霜花
TA貢獻1796條經(jīng)驗 獲得超10個贊
是的,就像你一樣。
這樣做是CSS自定義屬性的重點。
setTimeout(function() {
const elem = document.getElementById("one");
const anotherJsVariable = "yellow";
elem.style.setProperty('--my-custom-property', anotherJsVariable);
}, 750);
#one {
--my-custom-property: red;
background-color: var(--my-custom-property);
}
#two {
background-color: white;
}
#three {
background-color: var(--my-custom-property);
}
div {
display: inline-block;
padding: 1em;
}
<div id="one">
<div id="two">
<div id="three">
</div>
</div>
</div>
添加回答
舉報
0/150
提交
取消