图片Box-Shadow点击函数失效，求原生JS实现逐次添加阴影

嘿，我帮你找到了问题的根源！你的代码逻辑其实没问题，唯一的错误是在生成阴影样式字符串时多套了一层不必要的双引号，导致浏览器无法正确解析这个CSS属性值。

问题分析 #

在你的genShadow函数里，你返回的阴影字符串是这样的：

var newShadow = '"' + arr[0] + 'px ' + arr[1] + 'px ' + arr[2] + 'px ' + arr[3] + 'px ' + 'Black' + '"' ;

这会生成类似"0px 0px 1px 5px Black"的结果——注意前后的双引号，CSS的box-shadow属性值不需要额外的引号包裹，浏览器会把带引号的内容当成无效值，所以点击时阴影根本不会生效。

修改后的代码 #

只需要去掉那层多余的双引号，同时可以用ES6模板字符串让代码更简洁：

JavaScript部分

// 缓存DOM元素，避免重复查询
const catIMG = document.getElementById("catIMG");
let newBlur = 0; 
let newSpread = 0;

catIMG.addEventListener("click", shadowIMG);

function shadowIMG() {
  const myShadow = genShadow();
  catIMG.style.boxShadow = myShadow;
  console.log(myShadow);
}

function genShadow() {
  newBlur += 1;
  newSpread += 5;
  // 用模板字符串拼接，更清晰
  return `0px 0px ${newBlur}px ${newSpread}px Black`;
}

CSS和HTML部分保持不变即可

效果验证 #

修改后，每次点击图片：

• newBlur会递增1px，阴影的模糊程度逐渐增加
• newSpread会递增5px，阴影的扩散范围逐渐变大
  完全符合你想要的逐步加深阴影的效果，和你提到的示例功能一致，而且纯原生JS实现，不需要依赖jQuery。

内容的提问来源于stack exchange，提问作者Master Arrodox