CSS 变量存储

最新推荐文章于 2024-01-01 20:52:29 发布

炉火纯青-旺

最新推荐文章于 2024-01-01 20:52:29 发布

阅读量371

点赞数 1

分类专栏： CSS 文章标签： CSS

本文链接：https://blog.csdn.net/qq_34870529/article/details/89386440

版权

CSS 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>CSS实现变量存储</title>
    <style>
        /* 设置全局变量 */
        :root{
            --main-bg-color:#f4f4f4;
            --main-txt-color:#333;
            --header-bg-color:#6767cc;
            --header-txt-color:#fff;
            --container-width:90%;
        }

        body{
            padding: 0;
            margin: 0;
            line-height: 1.5;
            background-color: var(--main-bg-color);
            color: var(--main-txt-color);
        }
        header h1,.container h1{
            margin: 0;
            padding: 0;
        }
        header#main-header{
            background-color: var(--header-bg-color);
            color: var(--header-txt-color);
            padding: 5px 10px;
        }

        .container{
            width: var(--container-width);
            margin: 20px auto;
        }

        /* 设置局部变量 */
        .box{
            --box-bg-color:#ddd;
            --box-border-color:#06c;
            --box-padding:5px 10px;
            --box-shadow-h-offset:10px;
            --box-shadow-v-offset:5px;
            --box-shadow-blur:5px;
        }
        .box{
            background-color: var(--box-bg-color);
            border: 1px solid var(--box-border-color);
            padding:var(--box-padding);
            box-shadow: var(--box-shadow-h-offset) var(--box-shadow-v-offset) var(--box-shadow-blur) var(--box-border-color);
        }
        .box h1{
            color: var(--box-border-color);
        }

        .grid{
            --gap:20;
        }
        .grid{
            display: grid;
            grid-template-columns: 1fr 1fr;   /* 两块内容占满一行，各占一等份 */
            grid-gap: calc(var(--gap) * 1px);
            align-items: center;
        }

        .box p{
            --box-border-color:#555;
            color: var(--box-border-color);
            /* color:var(--box-p-color,red); */
        }
    </style>
</head>
<body>
    <header id="main-header">
        <h1>CSS Variables</h1>
    </header>
    <div class="container">
        <div class="grid">
            <div class="box">
                <h1>Hello World</h1>
                <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Facilis repudiandae delectus consequatur asperiores similique tenetur est dolores, nemo eveniet temporibus placeat beatae aspernatur dolore id porro eaque harum consectetur ab?</p>
            </div>
            <div class="box">
                <h1>Hello World</h1>
                <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Facilis repudiandae delectus consequatur asperiores similique tenetur est dolores, nemo eveniet temporibus placeat beatae aspernatur dolore id porro eaque harum consectetur ab?</p>
            </div>
        </div>
    </div>
    <script>
        const box = document.querySelector(".box");
        const boxStyles = getComputedStyle(box);   // 获取类名，.box的所有样式
        // console.log(boxStyles);
        const boxBorderColor = boxStyles.getPropertyValue("--box-border-color");
        console.log(boxBorderColor);   // 获取其中的一个变量属性
        const header = document.querySelector("#main-header");
        header.style.setProperty("--header-bg-color","red");  // 更改变量属性
    </script>
</body>
</html>

效果展示：

炉火纯青-旺

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
CSS 变量存储

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-...
复制链接

扫一扫

专栏目录