css自定义属性

彩色之外

已于 2023-04-12 18:17:05 修改

阅读量1.5k

点赞数 4

分类专栏： css相关文章标签： html servlet javascript

于 2022-08-15 19:42:53 首次发布

CSDN-@活在风浪里001

本文链接：https://blog.csdn.net/m0_57904695/article/details/126351923

版权

css相关专栏收录该内容

9 篇文章 0 订阅

订阅专栏

前期回顾

你把 css：hover 玩明白_0.活在风浪里的博客-CSDN博客你想要什么hover效果？你想要什么动画？十万行不同动画效果，可单独复制出来几行使用，极简轻量，css奇淫技巧还在等待什么，99+种功能，总能满足你的要求，快来一键三连抱走吧https://blog.csdn.net/m0_57904695/article/details/126309518?spm=1001.2014.3001.5501 比如你写一个网站大量用到相同的颜色，就可以使用css自定义属性

--正式开始

/*

Tip：变量的名称可以用数字、汉字等，不能包含$，[，^，(，%**等字符，变量的值也是可以使用各种属性值：

:root相当于html根元素，可以用来设置根元素的属性，如：:root{--color:red;}

定义语法： --自定义样式名:值;

使用语法: 样式属性名称:var(--变量名);

*/

1：基本例子


<style>
 
    :root {
     /*全局样式可复用*/
        --红色背景: #ff0000;
        --39: rgb(39, 214, 16);
        --pd: 10px 20px;
        --height: 200px;
    }

    .box {
        width: 100px;
        background: var(--红色背景);
        height: var(--height);
        color: var(--39);
        padding: var(--pd);
    }

    .box1 {
        width: 100px;
        height: var(--height);
        padding: var(--pd);
         /*可复用*/
        background: var(--红色背景);     
        margin: 10px;
    }
</style>

<body>
    <div class="box">红色</div>
    <div class="box1">1</div>

</body>

2： var（）第二个参数

你使用的自定义属性没定义，所以控制台没有背景色，

此时你可以借助var第二个参数，

如果第一个参数引用的自定义属性无效，则该函数将使用第二个值。

3：JavaScript获取css变量

第一种


<style>
    :root {
        --如何得到富婆的芳心: pink;
        --width: 100px;
        --height: 200px;
    }

    .box {
        width: var(--width);
        height: var(--height);
        background: var(--怎么让富婆爱上我, red);
    }
</style>

<body>
    <div class="box">666</div>

</body>
<script>
    let b = document.querySelector('.box');
    b.style.backgroundColor = 'green';
</script>

第二种


<head>
    <meta charset="utf-8">
    <title></title>
    <style type="text/css">
        /* 在这里定义变量 */
        :root {
            --var-primary-color: red;
            --var-cyan-color: blue;
        }

        .box {
            width: 200px;
            height: 200px;
            /* 通过 var(变量名) 引入变量即红色 */
            background: var(--var-primary-color);
        }
    </style>
</head>

<body>
    <div class="box"></div>
    <button onclick="onChange()">改变颜色</button>
    <script type="text/javascript">
        // 改变颜色
        function onChange()
        {
            // 通过 setProperty 函数将其 --var-primary-color 变量更改为绿色
            // document.documentElement.style.setProperty('--var-primary-color', 'green')
            // 你也可以用 var(--var-cyan-color) 的方式传递进去，它会自动转成对应的 blue
             document.documentElement.style.setProperty('--var-primary-color', 'var(--var-cyan-color)')
        }
    </script>
</body>