• CSS：变量函数var和自定义属性

    文章目录

    CSS变量

    CSS变量分为两部分：变量声明和变量使用。
    变量的声明是由CSS自定义属性和对应的属性朱组成的，比如：

            :root {
            --custom-color: deepskyblue;
        }

    • 1
    • 2
    • 3

    在这段代码中，–custom-color是属于css的自定义属性名，deepskyblue是属性值。css自定义属性的命名限制比较少，但是也不能出现$、[、]、^、(、)、%等等特殊字符。

    var()函数

    var函数是使用我们自定义的属性，语法为：var(属性名)。

    CSS自定义的属性，可以在html标签内设置，比如：

    <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>变量</title>
    <style>
    </style>
</head>

<body>
    <div style="--color: deepskyblue;">
        <p style="border: 10px solid var(--color);">5555</p>
    </div>
</body>

</html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19

    对应效果如图：
    在这里插入图片描述
    虽然是可以这样写，但是不建议，因为这样的写法，会导致代码混乱，可读性差，不利于维护。

    CSS自定义属性也可以在JavaScript中定义，直接修改上面的代码：

        <div id="box" >
        <p style="border: 10px solid var(--color);">5555p>
    div>

    • 1
    • 2
    • 3

    JavaScript：

        <script>
        var box = document.getElementById("box")
        box.style.setProperty('--color', 'deepskyblue');
    script>

    • 1
    • 2
    • 3
    • 4

    效果如上图所示。

    如果仅仅是设置样式，那么也不建议这样写。样式代码和JavaScript代码最好是分开，这样利于维护。

    如果我们自定义的属性值，需要能够作为字符串展示在页面中，那该怎么写呢？
    这就需要借助CSS的计数器来呈现自定义属性值了，代码如下：

    <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>变量</title>
    <style>
        :root {
            --percent: 23;
        }
        #box::before{
            counter-reset: progress var(--percent);
            content: counter(progress);
        }
    </style>
</head>

<body>
    <div id="box">
        <p>5555</p>
    </div>
</body>

</html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26

    效果如图：
    在这里插入图片描述

    在一个应用中和使用大量相同的属性值，比如相同的颜色。这样我们就可以把相同的属性值，设置在自定义属性中，然后在对应的模块中直接通过var函数调用对应的数值即可。

  • 相关阅读:
    Vue中的数据代理与数据劫持
    Swift学习内容精选（二）
    PAT 1014 福尔摩斯的约会
    基于Matlab求解高教社杯数学建模竞赛(cumcm2010A题)-储油罐的变位识别与罐容表标定（附上源码+数据+题目）
    基于kubernetes的分布式限流
    MySQL常见锁探究
    HTML静态网页成品作业(HTML+CSS)—— 环保主题介绍网页(5个页面)
    2022 ACM-ICPC 网络赛(1) A题
    微信小程序slot插槽的介绍，以及如何通过uniapp使用动态插槽
    JAVA 反射学习
  • 原文地址：https://blog.csdn.net/xuelian3015/article/details/127617643