Javascript30之03 – 图片变变变（CSS变量）

最新推荐文章于 2022-05-23 12:12:38 发布

千追万追

最新推荐文章于 2022-05-23 12:12:38 发布

阅读量472

点赞数

CC 4.0 BY-SA版权

分类专栏： javascript30

本文链接：https://blog.youkuaiyun.com/qq_35175413/article/details/91900957

javascript30 专栏收录该内容

10 篇文章

订阅专栏

本文介绍如何使用CSS原生变量实现图片效果的动态调整，包括间距、模糊度和底色。通过HTML的InputRange对象和JavaScript事件监听，实现了用户界面与样式参数的实时联动。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

从这个项目的教学视频学会一个新的英语短语：smart alec – 自作聪明的人。

从图片可以看出这个项目就是一个可以调整三个参数对图片进行处理的网页，主要是为了介绍CSS原生的变量。

CSS中原生的变量定义语法是：--*，变量使用语法是：var(--*)。这也太麻烦了吧

:root 是根选择器，其实也就是选择<html>。在根上定义这几个CSS变量，就可以全局使用了。

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

然后在图片上应用：

    img{
        padding: var(--spacing);
        background: var(--base);
        filter: blur(var(--blur)); /* filter属性定义了元素(通常是<img>)的可视效果(例如：模糊与饱和度)。 */
    }

给图片设置一个background，再加上padding，这样的方式构成图片的spacing。（一开始我还奇怪为什么不是border）

    <label for="spacing">Spacing:</label>
    <input id="spacing" type="range" name="spacing" min="10" max="200" value="10" data-sizing="px"> <!-- Input Range 对象是 HTML5 中的新对象。，再设置min、max、value，为范围输入器 -->
    <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">

      const inputs = document.querySelectorAll('.controls input');
      function handleUpdate() {
          const suffix = this.dataset.sizing || ''; /* this.dataset可以获得该元素的名为data-*的自定义元素的集合。这里将单位保存在data-sizing里，如果像颜色这种没有单位的则设为空白。 */
          document.documentElement.style.setProperty(`--${this.name}`, this.value + suffix);  /* 把对应变量的命名放到了<input>的name属性中，这里引用。 */
      } /* 这样的操作使得只需这一个函数就可以应付所有的update。这个操作还是比较优秀的，我现在完全搞懂了。 */
      inputs.forEach(input => input.addEventListener('change', handleUpdate));
      inputs.forEach(input => input.addEventListener('mousemove', handleUpdate)); /* 加上这个使效果实时出现。 */