如何用JavaScript实现图片按钮点击旋转切换开关功能？

你的代码逻辑错误在于误将点击事件的事件对象e当作开关状态的判断依据。点击事件触发时，e始终是有效的事件对象（永远为真），所以第二次点击根本走不到复位的分支里。

以下是几种实用的解决思路：

• 方法一：用变量记录开关状态
  定义一个外部变量保存当前旋转状态，每次点击翻转状态并设置对应样式：

  let isRotated = false;
  f.onclick = function () {
      isRotated = !isRotated;
      // 直接操作style属性，避免覆盖原有行内样式
      o.style.transform = `rotate(${isRotated ? 45 : 0}deg)`;
  }
  

• 方法二：用CSS类切换（推荐）
  把旋转样式写在CSS类里，用JS切换类名实现开关，样式和逻辑分离，更易维护：
  先写CSS：

  .rotate-active {
      transform: rotate(45deg);
  }
  

  再写JS：

  f.onclick = function () {
      o.classList.toggle('rotate-active');
  }
  

• 方法三：读取当前元素的计算样式判断状态
  通过获取元素当前的计算样式解析旋转角度，适合需要精确获取当前状态的场景：

  f.onclick = function () {
      const computedStyle = window.getComputedStyle(o);
      const transform = computedStyle.transform;
      let isRotated = false;
      
      if (transform !== 'none') {
          // 解析transform矩阵计算旋转角度
          const matrix = transform.split('(')[1].split(')')[0].split(',');
          const angle = Math.round(Math.atan2(matrix[1], matrix[0]) * (180 / Math.PI));
          // 兼容不同浏览器的角度表示（45度可能被表示为-315度）
          isRotated = angle === 45 || angle === -315;
      }
      
      o.style.transform = `rotate(${isRotated ? 0 : 45}deg)`;
  }
  

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