如何实现点击div时切换其宽度为视口全宽或原始宽度

• window.getComputedStyle() 返回的是只读的计算样式对象，仅支持读取元素最终生效的样式值，不支持通过该对象修改样式，修改元素样式需要操作元素本身的style属性，或者切换元素类名。
• 你给.box设置了带forwards属性的动画，CSS动画的样式优先级高于普通内联样式、类样式，所以就算正确修改了width属性，也会被动画的样式覆盖，无法生效。

你已经提前写好了对应的宽度切换动画，最简便的实现方式是通过控制动画的播放状态和方向完成效果，修改后的JS代码如下：

const box = document.querySelector(".box");
let isFullWidth = false;

box.onclick = () => {
  if (!isFullWidth) {
    // 正向播放动画，展开到100vw
    box.style.animationDirection = "normal";
    box.style.animationPlayState = "running";
  } else {
    // 反向播放动画，缩回100px
    box.style.animationDirection = "reverse";
    box.style.animationPlayState = "running";
  }
  isFullWidth = !isFullWidth;
}

如果你不需要动画过渡效果，可以直接移除.box的animation相关CSS属性，然后直接修改box.style.width即可：
修改后的CSS：

.box {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background-color: rebeccapurple;
  /* 移除原有animation相关属性 */
}

修改后的JS：

const box = document.querySelector(".box");
let isFullWidth = false;

box.onclick = () => {
  box.style.width = isFullWidth ? "100px" : "100vw";
  box.style.borderRadius = isFullWidth ? "50%" : "0%";
  isFullWidth = !isFullWidth;
}

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