使用 JavaScript 更改 CSS 變數
使用 JavaScript 更改變數
CSS 變數可以訪問 DOM，這意味著您可以使用 JavaScript 來更改它們。
以下是如何建立一個指令碼來顯示和更改之前頁面示例中使用的 --blue 變數。目前，如果您不熟悉 JavaScript，請不用擔心。您可以在我們的 JavaScript 教程 中瞭解更多關於 JavaScript 的資訊。
示例
<script>
// 獲取根元素
var r = document.querySelector(':root');
// 建立一個用於獲取變數值的函式
function myFunction_get() {
// 獲取根元素（屬性和值）的樣式
var rs = getComputedStyle(r);
// 彈出 --blue 變數的值
alert("The value of --blue is: " + rs.getPropertyValue('--blue'));
}
// 建立一個用於設定變數值的函式
function myFunction_set() {
// 將 --blue 變數的值設定為另一個值（在本例中為“lightblue”）
r.style.setProperty('--blue', 'lightblue');
}
</script>
自己動手試一試 »
瀏覽器支援
表中的數字表示完全支援 var() 函式的第一個瀏覽器版本。
| 函式 | |||||
|---|---|---|---|---|---|
| var() | 49.0 | 15.0 | 31.0 | 9.1 | 36.0 |
CSS var() 函式
| 屬性 | 描述 |
|---|---|
| var() | 插入 CSS 變數的值 |
