在 CSS 有原生變數後我們要來撰寫 CSS 也可以變得很有彈性,那如果我們想要用 javascript(jQuery) 來修改變數的值,就跟之前要修改 CSS 的屬性一樣的規則就好,像是我們有這樣的 html 跟 CSS:
<div class="box"></div>
<div>
<button id="change">change</button>
</div>
其中 box 我們用 CSS 的變數定義顏色,按鈕是等等要來綁事件的。
:root{
--color: red;
}
.box{
width: 100px;
height: 100px;
background: var(--color);
}
用 jQuery 修改 CSS 就是像這樣,直接修改變數的值就好:
$("#change").click(function(){
$(":root").css("--color", "blue")
})
當然修改區域變數也是可以的。
$("#change").click(function(){
$(".box").css("--color", "blue")
})