如何不使用jQuery实现点击div切换阴影颜色、再次点击恢复效果？

你原有代码存在两个问题导致效果不符合预期：

• HTML内onclick属性绑定函数时未加执行括号，点击时不会触发对应逻辑
• 编写的toShadow函数只有修改为红色阴影的逻辑，没有做状态切换、恢复初始阴影的判断

推荐实现方案（CSS类切换，易维护） #

通过切换CSS类的方式实现状态变更，代码逻辑更清晰，后续修改样式不需要改动JS逻辑：

HTML代码 #

<div id="btn">
  click to change shadow; click again to change back
</div>

CSS代码 #

#btn {
  height: 20px;
  padding: 8px 12px;
  border: 2px solid black;
  box-shadow: 5px 5px black;
  cursor: pointer;
  user-select: none;
}
/* 激活状态的红色阴影样式 */
#btn.active-shadow {
  box-shadow: 5px 5px red;
}

JavaScript代码 #

const btn = document.getElementById("btn");
btn.addEventListener("click", function() {
  // 切换类名：存在则移除，不存在则添加
  this.classList.toggle("active-shadow");
})

直接修改内联样式的实现方案 #

如果不想新增CSS类，也可以通过状态标记直接修改元素style属性实现：

const btn = document.getElementById("btn");
// 记录当前阴影状态，初始为黑色
let isShadowRed = false;
btn.addEventListener("click", function() {
  isShadowRed = !isShadowRed;
  this.style.boxShadow = isShadowRed ? "5px 5px red" : "5px 5px black";
})

两种方案都完全基于原生JavaScript实现，不需要引入任何第三方库。

内容的提问来源于stack exchange，提问作者Chris Nalusaku