通过js控制css变量

在JavaScript中，你可以通过操作CSS变量（也称为自定义属性）来动态改变样式。CSS变量在CSS中使用 – 前缀定义，例如 --main-color: red;。在JavaScript中，你可以使用 document.documentElement.style.setProperty 方法来设置这些变量，或者使用元素的 style.setProperty 方法（如果变量是在某个特定元素上定义的）。

以下是一些具体的示例：

1. 在全局范围内设置CSS变量

假设你有一个CSS变量 --main-color 定义在 :root 中：

:root {  --main-color: red;  
}

你可以使用JavaScript来修改这个变量：

document.documentElement.style.setProperty('--main-color', 'blue');

这样，所有使用了 --main-color 的元素都会更新为蓝色。

2. 在特定元素上设置CSS变量

如果你有一个CSS变量定义在某个特定的元素上，例如：

.my-element {  --border-color: black;  
}

你可以通过该元素的 style.setProperty 方法来修改这个变量：

const element = document.querySelector('.my-element');  
element.style.setProperty('--border-color', 'green');

3. 读取CSS变量的值

你也可以使用 getComputedStyle 方法来读取CSS变量的值：

const rootStyles = getComputedStyle(document.documentElement);  
const mainColor = rootStyles.getPropertyValue('--main-color');  
console.log(mainColor); // 输出 "blue"（假设之前已经被设置为蓝色）

4. 示例：动态改变背景颜色

下面是一个完整的示例，展示如何通过按钮点击事件动态改变CSS变量的值，从而改变页面的背景颜色：

<!DOCTYPE html>  
<html lang="en">  
<head>  <meta charset="UTF-8">  <meta name="viewport" content="width=device-width, initial-scale=1.0">  <title>CSS Variables with JavaScript</title>  <style>  :root {  --bg-color: lightblue;  }  body {  background-color: var(--bg-color);  }  </style>  
</head>  
<body>  <button id="changeColorBtn">Change Background Color</button>  <script>  const changeColorBtn = document.getElementById('changeColorBtn');  changeColorBtn.addEventListener('click', () => {  const newColor = prompt('Enter a new color:');  document.documentElement.style.setProperty('--bg-color', newColor);  });  </script>  
</body>  
</html>