Css 变量使用方法

你的名字 2022-12-06 12:53 341阅读 0赞

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
            /* :root 全局定义*/
            :root { 
                /* 变量声明的时候前面加两根连词线-- */
                --font-size: 200px;
                /* 设置颜色会替换默认值 */
                --color: pink;
                /* 字符串变量 必须使用引号 */
                --a:'hello';
                --b:'world';
    
                /* 定义的size没有单位px */
                --size: 50;
            }
            /* 使用方法 */
            .myvarible { 
                font-size: var(--font-size);  
                /* 使用可以设置默认值 */
                color: var(--color, red);
            }
            /* after可以在元素的后面加入内容*/
            .myvarible:after { 
                /* 这里加入的是abc*/
                /* content: 'abc'; */
                /* 这里拼接css变量 注意：只能拼接字符串*/
                content: var(--a)var(--b)
            }
            .main { 
                /* 使用变量--siza 使用calc计算 好处在于1px可以变化 比如2px的时候为150px */
                font-size: calc(var(--size) * 2px)
            }
        </style>
    </head>
    <body>
        <div class="myvarible"></div>
        <div class="main">非字符串</div>
        // js操作css变量
        <script>
           // 获取 :root
            var root = document.querySelector(':root') 
            var style = getComputedStyle(root)
            // 拿到style里面属性值trim 因为拿到的值前面有空格 所以使用trim方法去掉空格
            var color = style.getPropertyValue('--color').trim()
            // 设置属性 
            root.style.setProperty('--color','red')
        </script>
    </body>
    </html>