动态样式表，按名称切换CSS规则

Question

我想问你以下问题： “如何在动态生成的样式表中切换 CSS规则？”

问题描述：

假设我们有3个按钮，就像您在下面的示例图片中看到的那样：

单击它们应禁用或启用样式。因此，应该暂时禁用红色按钮类.red {...}，如果我再次单击它，则应该将其启用。

请注意：我不需要已有按钮的切换功能，换句话说就是切换状态。

问题： 我的问题与我创建的动态样式表有关。我在名为stylesheet的变量中有一个实例，如果将其打印到控制台，则会得到CSSStyleSheet对象。该对象有一个名为cssRules的属性，它是我所有规则的数组。因此，在我们的示例中，它将是3个元素的数组（每种颜色一个规则）。 如果现在单击红色按钮，则要在样式表中切换规则，如果再次单击，则要重新启用它。我知道删除规则并再次将其重新添加会很容易，但是我必须将其存储在某个地方，如果用户单击所有3个按钮怎么办？我需要将其缩放到至少20个按钮。

更新： 为此创建了一个小提琴： https://jsfiddle.net/doomsayer2/52ayw0od/20/

Answer 1

不确定我是否了解得很好，但是切换标签样式的正确方法是切换类。甚至还有一种方法就是JavaScript。例如

document.getElementById('btnRedAdd').classList.toggle('red')