如何通过编程方式在点击按钮后修改CSS类规则？

方法1：直接修改<style>元素内容 #

给初始的<style>标签加一个唯一ID，之后通过JavaScript获取该元素并修改其文本内容，直接替换CSS规则。

示例代码：

<style id="hover-style">
.hoverable:hover {
  color: red;
}
</style>

<button id="change-btn">切换hover颜色</button>

<p class="hoverable">鼠标悬停看效果</p>

<script>
document.getElementById('change-btn').addEventListener('click', function() {
  const styleEl = document.getElementById('hover-style');
  styleEl.textContent = `.hoverable:hover { color: blue; }`;
});
</script>

方法2：通过切换父类/全局类实现样式覆盖 #

提前定义好两种状态的CSS规则，通过给父元素（比如<body>）添加/移除类来切换生效的规则，这种方式更易维护，适合多样式切换场景。

示例代码：

<style>
/* 初始状态 */
body .hoverable:hover {
  color: red;
}
/* 切换后的状态 */
body.blue-hover .hoverable:hover {
  color: blue;
}
</style>

<button id="change-btn">切换hover颜色</button>

<p class="hoverable">鼠标悬停看效果</p>

<script>
document.getElementById('change-btn').addEventListener('click', function() {
  document.body.classList.toggle('blue-hover');
});
</script>

如果只需要单向切换（从红变蓝，不切换回去），把toggle换成add即可。

方法3：使用CSS变量动态修改 #

通过CSS自定义属性（变量）来控制颜色值，点击按钮时直接修改变量值，这种方式最灵活，适合需要频繁修改单个样式属性的场景。

示例代码：

<style>
:root {
  --hover-color: red;
}
.hoverable:hover {
  color: var(--hover-color);
}
</style>

<button id="change-btn">切换hover颜色</button>

<p class="hoverable">鼠标悬停看效果</p>

<script>
document.getElementById('change-btn').addEventListener('click', function() {
  document.documentElement.style.setProperty('--hover-color', 'blue');
});
</script>

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