css中变量的使用

前言

说来惭愧，最近学习sass后，才发现原来css中也可以写变量，原来自己对css的知识只是冰山一角，接下来我们就来写一个简单的动态改变背景颜色的demo

css中如何定义变量

:root{
        --color: #000;
     }

如何使用

body{
        height: 96vh;
        background-color: var(--color);
    }

js中获取变量值

const rootColor = getComputedStyle(document.documentElement).getPropertyValue('--color');

js中动态改变变量值

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

完整代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>简单的背景选择</title>
    <style>
        :root{
            --color: #000;
        }
        body{
            height: 96vh;
            background-color: var(--color);
        }
    </style>
</head>
<body>
    <input type="color" id="color">
    <script>
        // const rootColor = getComputedStyle(document.documentElement).getPropertyValue('--color');
        let colorSelector = document.querySelector('#color');
        colorSelector.addEventListener('change', (e) => {
            // 通过改变css变量，改变页面背景色
            document.documentElement.style.setProperty('--color', e.target.value);
        });
    </script>
</body>
</html>

或许css才是最神秘的语言

本文采用署名-非商业性使用-相同方式共享 4.0 国际许可协议，转载请注明出处。