css 继承和可变性-CSDN博客

本文链接：https://blog.csdn.net/dwb123456123456/article/details/90266027

今天看了有关css的文章，虽然现在用css经常用，但有些东西还是值的自己记录下的，这里简单列举下;这里是这两个var()和currentColor案例。

<!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>
        * {
            margin: 0;
            padding: 0;
        }

        .progress {
            height: 20px;
            width: 300px;
            background-color: #f5f5f5;
        }

        .progress::before {
            counter-reset: progress var(--percent, 0);
            content: counter(progress) '%\2002';
            display: block;
            height: 20px;
            line-height: 20px;
            width: calc(300px * var(--percent, 0) / 100);
            font-size: 12px;
            color: #fff;
            background-color: #2486ff;
            text-align: right;
            white-space: nowrap;
            overflow: hidden;
        }

        /* 案例2 */

        html,
        body {
            color: #000000;
        }

        .box {
            width: 100px;
            height: 100px;
            background: currentColor;
            padding: 10px;
        }
    </style>
</head>

<body>
    <!-- 功能表示法是一种组件值，可以表示更复杂的类型或调用特殊处理。主要分有以下三个部分：
        数学表达式（用以四则运算）：calc()、 min()、max()和clamp()。
        切换值（允许子元素循环调用传入参数）：toggle()。
        属性引用（获取引用的属性）：attr()。
        以上功能属性，在之前的章节中也提到过，目前能用的就只有 calc() 跟 attr()，但是即便如此，这两个函数已经却也已经发挥出了很强大的功能。 -->

    <!-- 这个里主要讲的是两个案例，之前可能没有用过这两个var()和currentColor -->

    <!-- 案例1 -->
    <div id="progress" class="progress"></div>

    <!-- 案例2--通过 currentColor 来轻松实现换肤功能 -->
    <div id="box" class="box"></div>
    你想换的颜色：
    <input id="color" name="color" type="color" value="#000000" autocomplete="off">


    <script>
        'use strict';
        let count = 0;
        const progressAdd = count => {
            if (count < 100) {
                count++;
                progress.style = `--percent: ${count}`;
                setTimeout(() => {
                    progressAdd(count);
                }, 1000);
            };
        };
        progressAdd(count);

        // 案例2
        color.onchange = event => {
            document.querySelector('body').style.color = color.value;
        };
    </script>
</body>

</html>