如何用原生JavaScript实现点击按钮联动控制box-shadow参数？

要实现参数联动，核心是把box-shadow的各个参数拆成独立变量存储，每次点击按钮只修改对应变量，再重新拼接成完整的box-shadow值。下面是完整的实现代码，包含强度、方向的联动，以及复制CSS功能：

完整代码 #

HTML部分 #

<div class="shadow-preview" style="padding:32px;margin:40px 20px;border:solid #89ACF1 1px;" id="shadow">
  <h2 style="padding:0 12px;display:block;margin:0;">Preview of the Box Shadow</h2>
  <div class="shadow-types" style="padding:12px">
    <h3 style="margin:0;padding:0 0 8px 0">Shadow strength</h3>
    <button data-blur="10" data-spread="0">100</button>
    <button data-blur="60" data-spread="0">200</button>
    <button data-blur="90" data-spread="0">300</button>
    <button data-blur="120" data-spread="0">400</button>
    <button data-blur="250" data-spread="30">500</button>
  </div>
  <div class="shadow-direction" style="padding:12px">
    <h3 style="margin:0;padding:0 0 8px 0">Shadow position</h3>
    <button data-x="0" data-y="-12">Top</button>
    <button data-x="20" data-y="0">Right</button>
    <button data-x="0" data-y="12">Bottom</button>
    <button data-x="-20" data-y="0">Left</button>
  </div>
  <div class="shadow-direction" style="padding:12px">
    <h3 style="margin:0;padding:0 0 8px 0">Shadow diagonal position</h3>
    <button data-x="20" data-y="-12">Top Right</button>
    <button data-x="-20" data-y="-12">Top Left</button>
    <button data-x="20" data-y="12">Bottom Right</button>
    <button data-x="-20" data-y="12">Bottom Left</button>
  </div>
  <div style="padding:12px">
    <button style="background:blue;padding:12px;color:#fff;border:none;" type="button" id="copyBtn">Copy CSS Code</button>
  </div>
</div>

JavaScript部分 #

// 初始化阴影参数，默认使用100强度的配置
const shadowParams = {
  x: 0,
  y: 0,
  blur: 10,
  spread: 0,
  color: '#89ACF1'
};
const shadowElement = document.getElementById('shadow');
const copyBtn = document.getElementById('copyBtn');

// 更新阴影样式的统一函数
function updateShadow() {
  const { x, y, blur, spread, color } = shadowParams;
  shadowElement.style.boxShadow = `${x}px ${y}px ${blur}px ${spread}px ${color}`;
}

// 绑定阴影强度按钮的点击事件
document.querySelectorAll('.shadow-types button').forEach(btn => {
  btn.addEventListener('click', () => {
    shadowParams.blur = parseInt(btn.dataset.blur);
    shadowParams.spread = parseInt(btn.dataset.spread);
    updateShadow();
  });
});

// 绑定阴影方向按钮的点击事件
document.querySelectorAll('.shadow-direction button').forEach(btn => {
  btn.addEventListener('click', () => {
    shadowParams.x = parseInt(btn.dataset.x);
    shadowParams.y = parseInt(btn.dataset.y);
    updateShadow();
  });
});

// 复制CSS代码功能
copyBtn.addEventListener('click', () => {
  const shadowValue = shadowElement.style.boxShadow;
  if (!shadowValue) return;
  const cssCode = `box-shadow: ${shadowValue};`;
  navigator.clipboard.writeText(cssCode).then(() => {
    alert('CSS代码已复制到剪贴板');
  }).catch(err => {
    console.error('复制失败:', err);
  });
});

// 页面加载时初始化显示默认阴影
updateShadow();

核心逻辑说明 #

1. 参数分离存储：用对象shadowParams保存当前阴影的所有参数（水平偏移、垂直偏移、模糊半径、扩散半径、颜色），每次只修改对应部分的值
2. 参数传递优化：通过data-*属性给按钮绑定对应参数，替代硬编码的onclick，更易维护
3. 统一更新函数：updateShadow负责把参数拼接成合法的box-shadow字符串，避免重复代码
4. 联动效果实现：比如先点击400强度按钮（设置blur=120），再点击Top方向按钮（设置y=-12），最终阴影会变成0px -12px 120px 0px #89ACF1，完全保留之前的强度参数

内容的提问来源于stack exchange，提问作者Sathish Kumar