透過 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")
})

 

 

課程推薦

和我們交流

加入我們的社群,裡面會有一些技術的內容、有趣的技術梗,以及職缺的分享,歡迎和我們一起討論。