JavaScript如何实现阴影效果_JavaScript中CSS变量怎样使用

javascript通过操作css的box-shadow/text-shadow属性或css变量来动态控制阴影效果，支持内联样式、类名切换、交互响应及主题适配，css变量可读写并自动重绘。

JavaScript 本身不直接“实现”阴影效果，而是通过操作元素的 CSS 样式（比如 box-shadow 或 text-shadow）来动态控制阴影；CSS 变量（Custom Properties）则由 CSS 定义，JavaScript 可读写其值，从而实现样式与逻辑的灵活联动。

用 JavaScript 动态设置阴影效果

阴影本质是 CSS 属性，JS 通过修改 style 或 classList 来触发变化：

• 直接设置内联样式：
  element.style.boxShadow = "2px 2px 8px rgba(0,0,0,0.2)";
• 切换预定义的 CSS 类（推荐，利于维护和动画）：
  element.classList.add("has-shadow");
  对应 CSS 中：
  .has-shadow { box-shadow: 0 4px 12px rgba(0,0,0,0.15); }
• 响应交互（如鼠标悬停、点击）：
  button.addEventListener("mouseenter", () => { btn.style.boxShadow = "0 6px 16px rgba(0,82,204,0.3)"; });

在 CSS 中定义变量并用于阴影

先在 CSS 中声明变量（通常放在 :root 或组件选择器内），再在阴影属性中引用：

Figma

Figma 是一款基于云端的 UI 设计工具，可以在线进行产品原型、设计、评审、交付等工作。

下载

• CSS 示例：
  

  :root {<br>
    --shadow-sm: 0 1px 3px rgba(0,0,0,0.1);<br>
    --shadow-md: 0 4px 6px rgba(0,0,0,0.1);<br>
    --shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.1);<br>
  }

  
  .card { box-shadow: var(--shadow-md); }

用 JavaScript 读写 CSS 变量

借助 getComputedStyle 读取，用 style.setProperty 修改：

立即学习“Java免费学习笔记（深入）”；

• 读取当前值：
  

  const root = document.documentElement;<br>
  const currentShadow = getComputedStyle(root).getPropertyValue("--shadow-md").trim();

• 动态更新变量（影响所有使用该变量的元素）：
  root.style.setProperty("--shadow-md", "0 6px 12px rgba(100,100,255,0.2)");
• 配合主题切换：
  document.body.setAttribute("data-theme", "dark");
  在 CSS 中用 [data-theme="dark"] :root { --shadow-md: 0 4px 8px rgba(0,0,0,0.3); }

实用小技巧

• 阴影值可拆解为多个变量（如 --shadow-x、--shadow-blur），组合使用更灵活
• 修改 CSS 变量后，依赖它的 box-shadow 会自动重绘，无需手动刷新
• 避免在循环中频繁调用 setProperty，可批量更新或使用 CSS 动画替代逐帧 JS 控制