js變量如何賦值給css使用？

項目中，我們有時候會遇到組件的樣式是動態變化的，這個時候就需要動態傳變量，然后供css用，那么這個如何實現呢？

方法一：

使用原生js操作dom的方法，來改變css的樣式，比如

document.getElementById(id).style.property = new style

這里的new style 里面就可以使用js傳入的變量。

此方法固然可以，但是對應改變一些復雜的css，比如動畫什么的，操作起來就不怎么方便了。此時，如下的方法二就顯得尤為重要了！

方法二：

利用css變量來處理，思路是將js變量賦值給css變量，然后在css樣式中使用css變量。如下圖所示，我們傳入year變量，然后生成了--top、--bottom等變量，然后這些變量就可以在css中使用！

 

 其他：

當然，單論css變量的使用，我們還可以有如下的使用方法，具體詳見阮一峰教程 （https://www.ruanyifeng.com/blog/2017/05/css-variables.html）

JavaScript 操作 CSS 變量的寫法如下。

// 設置變量
document.body.style.setProperty('--primary', '#7F583F');

// 讀取變量
document.body.style.getPropertyValue('--primary').trim();
// '#7F583F'

// 刪除變量
document.body.style.removeProperty('--primary');

style 里面直接申明css變量：

body {
  --foo: #7F583F;
}

.content {
  --bar: #F7EFD2;
}