如何用原生JavaScript直接切换CSS样式而非类（含动态值）？

可以实现，不需要额外监听关闭或移出事件，在同一个点击回调里就能完成切换逻辑。核心思路是记录当前样式状态，点击时判断并执行切换。

以下是两种可行的实现方案：

方案1：用外部变量维护状态 #

适合需要固定使用某一次计算值的场景（比如首次点击计算后，后续切换都用这个值）：

let isBottomApplied = false;
target.addEventListener('click', function() {
  // 这里是你的动态计算逻辑，示例：获取目标元素的高度
  const rect_height = target.getBoundingClientRect().height;
  
  if (isBottomApplied) {
    // 移除样式：将属性设为空字符串恢复默认
    container.style.bottom = '';
  } else {
    // 应用动态计算的样式
    container.style.bottom = `${rect_height}px`;
  }
  // 切换状态标记
  isBottomApplied = !isBottomApplied;
});

方案2：直接读取元素当前样式判断状态 #

适合每次点击都需要重新计算动态值的场景（比如窗口大小变化后，rect_height需要更新）：

target.addEventListener('click', function() {
  const rect_height = target.getBoundingClientRect().height;
  
  // 通过当前style属性值判断是否已应用样式
  if (container.style.bottom) {
    container.style.bottom = '';
  } else {
    container.style.bottom = `${rect_height}px`;
  }
});

如果需要切换多个样式属性，可以扩展判断逻辑，或者用对象存储要切换的键值对，统一处理。

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