如何基于当前值修改CSS值？寻求两值快速切换的简便方法

当然有啦！想要基于当前CSS值快速在两个状态间切换，其实有几个非常高效的简便方法，我来给你拆解一下：

这种方式适合需要读取当前CSS值再做判断的场景，逻辑清晰且便于多属性联动：

首先在CSS里定义全局变量：

:root {
  --bg-color: #ffffff;
  --text-color: #333333;
}

body {
  background-color: var(--bg-color);
  color: var(--text-color);
}

然后用JS读取当前值并切换：

const toggleStyle = () => {
  const root = document.documentElement;
  // 获取当前CSS变量的实际值
  const currentBg = getComputedStyle(root).getPropertyValue('--bg-color').trim();
  
  // 根据当前值判断切换目标
  const newBg = currentBg === '#ffffff' ? '#333333' : '#ffffff';
  const newText = currentBg === '#ffffff' ? '#ffffff' : '#333333';
  
  // 更新变量值
  root.style.setProperty('--bg-color', newBg);
  root.style.setProperty('--text-color', newText);
};

// 绑定到按钮点击事件
document.querySelector('.toggle-btn').addEventListener('click', toggleStyle);

如果只是在两个固定样式状态间切换，直接操作DOM类名是最轻量化的选择，甚至不用读取当前CSS值：

先写好两个状态的CSS类：

.style-default {
  background: #ffffff;
  color: #333333;
}

.style-alt {
  background: #333333;
  color: #ffffff;
}

然后用JS一键切换类：

const toggleStyle = () => {
  // 直接切换类名，自动处理"添加/移除"逻辑
  document.body.classList.toggle('style-alt');
};

这种方法代码量极少，维护起来也很方便，适合大多数简单的切换场景。

要是想要切换时的丝滑过渡效果，可以结合CSS @property 让自定义属性支持动画：

/* 先声明变量的类型，让它支持过渡 */
@property --bg-color {
  syntax: '<color>';
  inherits: true;
  initial-value: #ffffff;
}

body {
  background-color: var(--bg-color);
  /* 给变量添加过渡动画 */
  transition: --bg-color 0.3s ease;
}

.style-alt {
  --bg-color: #333333;
}

之后依然用方法2的JS切换类名，就能实现平滑的样式过渡了。

总的来说，如果需要基于当前值做动态判断来切换，方法1最灵活；如果只是固定两个预设状态来回切，方法2是最省心的；要是想要提升交互体验，方法3就能满足你的需求～

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