使用css变量存储demo

最新推荐文章于 2022-03-11 14:02:16 发布

hr226

最新推荐文章于 2022-03-11 14:02:16 发布

阅读量145

点赞数

分类专栏： demo 文章标签：使用CSS变量存储demo

本文链接：https://blog.csdn.net/hr226/article/details/100707604

版权

demo 专栏收录该内容

21 篇文章 0 订阅

订阅专栏

index.html

<!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>Document</title>
    <link rel="stylesheet" href="style.css">
</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. Iste ad laudantium nulla, unde, libero corrupti quisquam ullam accusamus sapiente numquam nam ab, harum obcaecati ipsam quos repudiandae eum. Fuga, alias.</p>
            </div>
            <div class="box">
                <h1>Hello World</h1>
                <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Iste ad laudantium nulla, unde, libero corrupti quisquam ullam accusamus sapiente numquam nam ab, harum obcaecati ipsam quos repudiandae eum. Fuga, alias.</p>
            </div>
        </div>
    </div>
    <script src="./main.js"></script>
</body>

</html>

style.css

/* 设置全局变量：在任何标签中都可以使用这个变量 */

:root {
    /* css命名变量使用 -- 开头 */
    --main-bg-color: #f4f4f4;
    --main-txt-color: #333;
    --header-bg-color: #6767cc;
    --header-txt-color: #fff;
    --container-width: 90%;
}

body {
    margin: 0;
    padding: 0;
    line-height: 1.5;
    /* background-color: red; */
    /* css使用变量 使用var()方法 */
    background-color: var(--main-bg-color);
    color: var(--main-txt-color);
}

header#main-header {
    background-color: var(--header-bg-color);
    color: var(--header-txt-color);
}

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

header#main-header h1 {
    margin: 0;
    padding: 0;
}


/* 设置局部变量 */

.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: 20px; */
    --gap: 20;
}

.grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    /* grid-gap: var(--gap); */
    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, #555);
}

main.js

// js 如何获取到css文件中的变量以及如何给css文件中的变量赋值
// #06c .box
const box = document.querySelector(".box");
const boxStyles = getComputedStyle(box); //getComputedStyle()获取到类名为box的所有样式
// console.log(boxStyles);
const boxBorderColor = boxStyles.getPropertyValue("--box-border-color"); //getPropertyValue()获取到--box-border-color属性的属性值
// console.log(boxBorderColor);

const header = document.querySelector("#main-header");
header.style.setProperty("--header-bg-color", "green");

hr226

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
使用css变量存储demo

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

扫一扫

专栏目录