效果图

遇到的盲点

源码

<!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>在线图片修饰器 使用JS修饰CSS变量</title>
</head>
<body>
    <h2>Update CSS Variables with <span class='h1'>JS</span></h2>

    <div class="controls">
        <!-- label与input一般同时使用//还有range的特殊操作，左边界与右边界进行设置 value就是位置啊-->
        <label for="spacing">Spacing:</label>
        <input id="spacing" type="range" name="spacing" min="10" max="200" value="10" data-sizing="px">

        <label for="blur">Blur:</label>
        <input id="blur" type="range" name="blur" min="0" max="25" value="10" data-sizing="px">

        <label for="base">Base Color</label>
        <input id="base" type="color" name="base" value="#ffc600">
    </div>

    <img src="./留言板.jpg" alt="">

    <style>

        :root{
            --base: #ffc600;
            --spacing: 10px;
            --blur: 10px;
            --grayscale: 0%;
        }

        img {
            padding: var(--spacing);
            background: var(--base);
            filter: blur(var(--blur)) grayscale(var(--grayscale));
            width: 66%;
        }

        .h1{
            color: var(--base);
        }

        body {
            text-align: center;
            background: #193549;
            color:white;
            font-family: 'helvetica neue', sans-serif;
            /* 表示了字体的粗细程度 */
            font-weight: 100;
            font-size: 50px;
        }

        .controls {
            margin-bottom: 50px;
        }

        input {
            width: 100px;
        }

    </style>
    <script>
        const inputs = document.querySelectorAll('.controls input');

        function handleUpdate() {
            const suffix = this.dataset.sizing || '';
            // 用于改变CSS样式
            document.documentElement.style.setProperty(`--${this.name}`, this.value + suffix);
        }
        inputs.forEach(input => input.addEventListener('change',handleUpdate));
        inputs.forEach(input => input.addEventListener('mousemove',handleUpdate));
    </script>
</body>
</html>