🌟HTML5和ES6新特性：用 CSS 自定义属性 + JavaScript 实现动态样式控制引言：为什么我们需要“动

引言：为什么我们需要“动态 CSS”？

在传统开发中，如果我们想让用户实时调整页面样式（比如调节图片模糊度、间距或主题色），往往需要硬编码多个 class 或频繁操作内联样式，代码冗余且难以维护。

而随着 CSS 自定义属性（CSS Custom Properties） 的普及，配合 JavaScript，我们可以实现一种声明式 + 数据驱动的优雅方案：改一个变量，全局样式自动更新！

今天，我们就通过一个经典案例，手把手拆解如何用 :root 变量 + <input> 控件 + 原生 JS，打造一个可交互的动态样式面板。

一、HTML 结构：简洁而语义化

html
预览
<h2>Update CSS Variables with <span class="hl">JS</span></h2>

<div class="controls">
  <label for="spacing">Spacing:</label>
  <input type="range" id="spacing" name="spacing" min="10" max="200" value="10" data-sizing="px" />

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

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

<img src="https://example.com/image.jpg" />

设计亮点：

使用 name 属性统一标识每个控件（如 spacing、blur、base）
为需要单位的数值控件添加 data-sizing="px" 自定义属性
颜色选择器使用原生 type="color"，无需第三方库

无障碍提示：每个 <input> 都配有 <label for="...">，提升可访问性。

二、CSS 样式：变量驱动一切

css编辑
style{
:root {
  --spacing: 10px;
  --blur: 10px;
  --base: #ffc600;
}

img {
  padding: var(--spacing);
  background: var(--base);
  filter: blur(var(--blur));
}

.controls {
  padding: var(--spacing);
}

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

核心思想：

所有可变样式都通过 var(--xxx) 引用
变量定义在 :root（即 <html>）中，全局可用
修改变量值 → 所有使用该变量的地方自动重绘

这就是 CSS 变量的“响应式”能力 —— 不需要手动遍历 DOM 元素！

三、JavaScript 交互：一行代码更新全局样式

js编辑
<script>
const inputs = document.querySelectorAll('.controls input');

inputs.forEach(input => {
  input.addEventListener('input', handleUpdate); // 注意：用 input 而非 change
});

function handleUpdate() {
  const suffix = this.dataset.sizing || '';
  // document.documentElement -> html
  document.documentElement.style.setProperty(
  // 事件处理函数中，this指向事件发生的元素
    `--${this.name}`,
    this.value + suffix
  );
}
</script>

关键细节解析：

代码片段	作用
`this.name`	获取当前 input 的 `name`（如 `"spacing"`）
`this.dataset.sizing`	读取 `data-sizing` 属性（如 `"px"`），颜色输入框无此属性则为空
`document.documentElement`	指向 `<html>` 元素，正是 `:root` 所在位置
`.setProperty('--xxx', value)`	动态设置 CSS 自定义属性

为什么用 input 事件？
change 仅在松手后触发，而 input 在拖动滑块时就实时响应，体验更流畅！

四、完整工作流程图解

用户拖动 Spacing 滑块 → 触发 input 事件
→ JS 获取 name="spacing" 和 data-sizing="px"
→ 执行：setProperty('--spacing', '80px')
→ 图片 padding + 控制面板 padding 同步增大！
用户调节 Blur 滑块 → 更新 --blur → filter: blur(...) 实时生效
用户选择新 主题色 → 更新 --base → 图片背景色 + 标题高亮文字颜色同步变化

整个过程无需刷新、无需框架，纯原生实现！

五、进阶优化建议

虽然这个例子已经很精炼，但在实际项目中，你还可以：

持久化用户设置

js编辑
localStorage.setItem('theme', JSON.stringify({ spacing, blur, base }));

支持更多单位
比如 data-sizing="rem"，用于字体大小控制

添加重置按钮

js编辑 
function reset() {
  document.documentElement.style.setProperty('--spacing', '10px');
  // ...其他默认值
}

结合 CSS transition 实现平滑过渡

css编辑
img {
  transition: padding 0.2s, filter 0.2s, background 0.3s;
}

完整源代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>CSS4 变量</title>
    <style>
      /* 选中根元素， html 
    声明变量 css 
  */
      :root {
        /* 好多地方都可以用
      改一个地方， 所有的都可以改变 
    */
        --spacing: 10px;
        --blur: 10px;
        --base: #ffc600;
      }
      img {
        padding: var(--spacing);
        background: var(--base);
        filter: blur(var(--blur));
      }
      .controls {
        padding: var(--spacing);
      }
      .hl {
        color: var(--base);
      }
    </style>
  </head>
  <body>
    <h2>Update Css Variables with <span class="hl">JS</span></h2>
    <div class="controls">
      <!-- 无障碍访问 -->
      <label for="spacing">Spacing:</label>
      <!-- html5 新特性表单元素 -->
      <input
        type="range"
        id="spacing"
        name="spacing"
        min="10"
        max="200"
        value="10"
        data-sizing="px"
      />

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

      <label for="base">Base Color:</label>
      <input type="color" id="base" name="base" value="#ffc600" />
    </div>
    <img
      src="https://img1.baidu.com/it/u=1286495993,1977676821&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500"
    />
    <script>
      const inputs = document.querySelectorAll(".controls input");
      inputs.forEach((input) => input.addEventListener("change", handleUpdate));

      function handleUpdate() {
        // this指向 this作为事件处理函数时，指向事件发生的元素
        const suffix = this.dataset.sizing || ``;
        // document.documentElement -> html元素
        // serProperty()动态设置css的自定义属性
        document.documentElement.style.setProperty(
          `--${this.name}`,
          this.value + suffix
        );
      }
    </script>
  </body>
</html>

总结：现代 Web 开发的最佳实践

这个小 demo 虽然简单，却完美体现了现代前端开发的核心思想：

声明式样式：用变量抽象可变部分
数据驱动 UI：状态（变量值）决定视图
低耦合交互：JS 只负责更新状态，不直接操作样式
原生能力优先：善用 HTML5 表单 + CSS 变量 + DOM API

记住：好的代码不是“能跑就行”，而是“易维护、可扩展、用户体验佳”。

🌟HTML5和ES6新特性：用 CSS 自定义属性 + JavaScript 实现动态样式控制