按钮左右切换移动功能：为何需重复定义left值？

嘿，我来帮你理清这个疑惑～

你遇到的问题核心在于 element.style这个属性的局限性：它只能读取或设置元素的内联样式（也就是直接写在HTML元素的style属性里的样式），而你在CSS样式表中设置的left: 4px并不属于内联样式，所以初始状态下执行console.log(button.style.left)会得到空字符串——这就是为什么你删掉JS里的button.style.left = "4px"后，功能会失效：第一次点击时，button.style.left === "4px"这个条件不成立，代码不会执行右移的逻辑。

解决方案1：使用getComputedStyle获取计算后的样式 #

如果你想继续通过判断left值来实现逻辑，可以用window.getComputedStyle()方法获取元素最终渲染的计算样式，它能读取到样式表中的设置：

var button = document.getElementById("button");
button.onclick = function() {
  // 获取元素最终计算后的left样式
  const currentLeft = window.getComputedStyle(this).left;
  // 注意：getComputedStyle返回的样式值带单位，要和你设置的值统一
  if (currentLeft === "4px") {
    this.style.left = "20px";
  } else {
    this.style.left = "4px";
  }
}

解决方案2：用类切换实现（更优雅，推荐） #

这种方式把样式逻辑完全交给CSS，JS只负责切换类，更符合「关注点分离」的原则，代码也更简洁：

首先修改CSS，新增一个表示右移状态的类：

#light {
  position: relative;
  width: 40px;
  margin: auto;
  background-color: black;
  z-index: 10;
  margin-top: 420px;
  height: 20px;
  border-radius: 40px;
  padding: 10px; /* 修正原CSS中padding的位置错误 */
}
#button {
  width: 16px;
  background-color: cornflowerblue;
  height: 16px;
  border-radius: 40px;
  position: relative;
  top: 2px;
  left: 4px;
  cursor: pointer;
  transition: 0.5s;
}
/* 新增active类，定义右移后的位置 */
#button.active {
  left: 20px;
}

然后简化JS代码，只需要切换类即可：

var button = document.getElementById("button");
button.onclick = function() {
  // 切换active类，有则移除，无则添加
  this.classList.toggle("active");
}

这样不管初始样式怎么设置，JS都不用关心具体的数值，只负责控制状态，维护起来也更方便～

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