在前端开发中，你可以使用JavaScript来操作CSS变量（也称为自定义属性）。CSS变量在:root伪类或特定的选择器中定义，然后通过var(--variable-name)在样式表或内联样式中引用。
以下是一个示例方法，展示了如何使用JavaScript来读取、设置和更新CSS变量：
1. 读取CSS变量
要读取CSS变量，可以使用getComputedStyle方法和getPropertyValue方法。
function getCSSVariable(element, variableName) {return window.getComputedStyle(element, null).getPropertyValue(variableName).trim();
}// 示例
const rootElement = document.documentElement; // 通常指 <html> 元素
const colorValue = getCSSVariable(rootElement, '--primary-color');
console.log(colorValue); // 输出 CSS 变量的值
2. 设置CSS变量
要设置CSS变量，可以直接修改元素的style.setProperty方法。
function setCSSVariable(element, variableName, value) {element.style.setProperty(variableName, value);
}// 示例
const rootElement = document.documentElement; // 通常指 <html> 元素
setCSSVariable(rootElement, '--primary-color', '#ff0000'); // 设置 CSS 变量
3. 更新CSS变量（与设置类似，但可能包含逻辑）
更新CSS变量通常与设置CSS变量类似，但可能包含一些逻辑判断或计算。
function updateCSSVariable(element, variableName, newValue) {// 在这里可以添加一些逻辑判断或计算// 比如基于当前值计算新值setCSSVariable(element, variableName, newValue);
}// 示例
const rootElement = document.documentElement; // 通常指 <html> 元素
updateCSSVariable(rootElement, '--primary-color', getComputedStyle(rootElement).getPropertyValue('--secondary-color')); // 更新为 secondary-color 的值
4. 完整示例：动态改变主题颜色
以下是一个完整的示例，展示了如何使用上述方法来动态改变一个网页的主题颜色。
HTML:
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>CSS Variables Example</title><style>:root {--primary-color: #3498db;--secondary-color: #2ecc71;}body {background-color: var(--primary-color);color: white;}button {background-color: var(--secondary-color);color: white;border: none;padding: 10px 20px;cursor: pointer;}</style>
</head>
<body><h1>Hello, CSS Variables!</h1><button id="changeColorButton">Change Color</button><script src="script.js"></script>
</body>
</html>
JavaScript (script.js):
document.getElementById('changeColorButton').addEventListener('click', () => {const rootElement = document.documentElement;const currentColor = getCSSVariable(rootElement, '--primary-color');const newColor = currentColor === '#3498db' ? '#e74c3c' : '#3498db'; // Toggle between two colorsupdateCSSVariable(rootElement, '--primary-color', newColor);
});function getCSSVariable(element, variableName) {return window.getComputedStyle(element, null).getPropertyValue(variableName).trim();
}function setCSSVariable(element, variableName, value) {element.style.setProperty(variableName, value);
}function updateCSSVariable(element, variableName, newValue) {setCSSVariable(element, variableName, newValue);
}
在这个示例中，点击按钮会切换背景颜色在#3498db和#e74c3c之间。通过JavaScript操作CSS变量，你可以动态地改变网页的样式，从而创建更灵活和交互性更强的用户体验。
![[CSP2020-J4] 直播获奖](https://img-blog.csdnimg.cn/img_convert/5c8cf286e7bf2c08f859b337286669e9.png)
