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

Question

我想请教您以下问题:“如何在动态生成的样式表中切换 css 规则？”

问题描述:

假设我们有 3 个按钮，如下面的示例图片所示:

点击它们应该禁用或启用样式。所以红色按钮类 .red {...} 应该被暂时禁用，如果我再次点击它，它应该被启用。

请注意:我不需要按钮的切换功能，我已经有了，换句话说，切换状态。

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

更新:为此创建了一个 fiddle : https://jsfiddle.net/doomsayer2/52ayw0od/20/

Answer 1

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

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