CSS中变量的作用

2024-01-08 16:45:11

CSS中变量的作用

CSS中的变量用于存放属性值，可统一修改样式，不需要再手动更改大量的属性值。

CSS变量需要用到两个方法 : root 和 var() 。

:root 是指文档的根元素，在其中定义的变量可作为?全局变量，例如：

:root{
    /* 变量名：变量值 */
    --col: #393939;
}

?var() 函数用于使用CSS变量，例如：var() 函数用于使用CSS变量，例如：

body {
    height: 500px;
    /* 属性：var(变量名) */
    background-color: var(--col);
}

?注意：CSS变量严格区分大小写，变量名前需要有 -- 符号，例如：--col 。

JavaScript修改CSS变量?

// document.documentElement.style.setProperty("变量名","变量值");
document.documentElement.style.setProperty("--back","#FFFFFF");
  • document.documentElement 属性可返回文档的根节点。
  • ?setProperty() 方法用于设置CSS变量。

CSS变量使用代码?

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>CSS变量使用</title>
        <style type="text/css">
            *{
                margin: 0;
                padding: 0;
                box-sizing: border-box;
            }
            :root{
                --back: #393939;
                --col: pink;
                --sizes: 300px;
            }
            body{
                height: 100vh;
                background-color: var(--back);
                display: flex;
                justify-content: center;
                align-items: center;
            }
            #box{
                width: var(--sizes);
                height: var(--sizes);
                background-color: var(--col);
            }
            #box p{
                text-align: center;
                line-height: var(--sizes);
                font-size: 30px;
                color: var(--back);
            }
        </style>
    </head>
    <body>
        
        <div id="box">
            <p onclick="cut()">点击切换</p>
        </div>
        
        <script type="text/javascript">
            
            function cut(){
                document.documentElement.style.setProperty("--back","#FFFFFF");
                document.documentElement.style.setProperty("--col","aqua");
                document.documentElement.style.setProperty("--sizes","200px");
            }
            
        </script>
        
    </body>
</html>

文章来源:https://blog.csdn.net/Mxy18851251178/article/details/135379050
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。