透過 javascript(jQuery) 修改 CSS 變數的值

在 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")
})