JavaScript操作CSS变量的完整指南：设置、读取与动态交互

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

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

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

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

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

<!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>

var root = document.querySelector(':root');
root.style.setProperty('--customHeight', "36px");