Javascript 检索或更改伪元素的css规则

编辑2015-10-07 1624 CST

这个问题已经被标记为可能的重复-我发布它的原因是其他问题的答案都没有提供我想要的所有信息，我想要一个简单直接的方法来做。我可以控制样式表和规则的顺序，以便引用正确的规则。我还想就这种方法在未来的可行性得到反馈

查看我在下面发布的评论，了解我为什么不接受可能重复问题的答案的其他原因

**原来的问题如下**

我搜索了一个类似这样的问题，找到了一些可以解决部分问题的问题，但不能同时检索和更改伪元素的CSS值，如

：：before

和

：：after

在来这里之前，我已经用谷歌搜索过网络，基本上我发现没有理想的方法可以做到这一点

我找到了一种在FF 40、IE 9和Chrome 45.0.2454.101 m中工作的方法，但我想知道我是否忽略了某些可能导致我的方法在某些情况下崩溃的东西

我在这里和web上的其他地方看到的关于访问或更改伪元素的CSS值的答案是，您不能直接访问这些项，因为它们不是“DOM的一部分”和“DOM之外”

他们说，改变它们的唯一方法是创建一个新规则并将其附加到现有规则以覆盖编码值

以下是演示该方法的代码段：

函数changeColor（）{//Flip psedo元素的背景色
var newColor，
当前颜色；
//获取当前颜色
currentColor=document.styleSheets[0]。cssRules[0]。style.backgroundColor；
//翻转颜色
newColor=（currentColor=“红色”）？“浅绿色”：“红色”；
//换颜色
document.styleSheets[0]。cssRules[0]。style.backgroundColor=newColor；
//在顶部消息中添加颜色
document.getElementById（“colorIs”）.innerHTML=newColor；
//显示颜色
document.getElementById（“DisplayColor”）.innerHTML=
“以前的颜色是”+currentColor+
，改为“+newColor+”；
//更改按钮的背景（不需要，但我想我会把它扔进去）
document.getElementById（“changeButton”）.style.backgroundColor=newColor；
}

#testDiv:：before{
背景色：浅绿色；
内容：“psedo元素”；
}
#转换按钮{
背景色：浅绿色；
}

此分区有一个伪：：before元素，其背景色为
水



单击“显示并翻转颜色”以显示颜色

将颜色从浅绿色和红色翻转过来，反之亦然。

操纵而不是DOM元素是一种模糊但完全有效的（和）更改元素样式的方法。它之所以晦涩难懂，是因为它很困难，需要一个嵌套循环遍历所有样式表中的所有规则，以找到您想要更改的规则。它之所以晦涩难懂，也是因为它不是非常有价值的——您通常可以通过访问DOM元素的

style

属性来完成同样的事情

但是，对于伪元素，没有DOM元素。伪元素是样式规则的产物，因此操纵伪元素的唯一方法是通过样式规则。人们建议添加样式规则，因为这比查找并编辑样式规则更容易。但是查找和编辑它是完全有效的

---

通过添加一次样式规则，然后保留对该规则的引用并对该规则进行后续编辑，您可以两全其美。

另一个简单的方法是附加样式标记并将文本设置为适当的css规则。我认为这是一个提出得很好且经过研究的问题，尤其是对于新手。值得投票的。尽管事先定义CSS和简单地向父类添加类可能要容易得多。这可能也是charlietfl想要表达的。这里有一个小例子：。可能重复的我一定不同意，OP不仅仅是寻找一个简单的修复方法，而是试图理解其机制。我没有选择附加规则路线的一个原因是，此更改可能需要在网页上执行多次，为什么要创建规则和值，然后附加到样式中。。等此外，我无法对新值进行预编码，因为它们在各地都会有所不同@Shikkediel谢谢你对这件事的评论。我同意找到你想要改变的规则会使事情复杂化。如果您忘记并在样式表中的某个特定位置添加了规则，或者在目标样式表之前放置了另一个样式表，则该方案将被打破。但是，我真的很喜欢我的方法，不是因为我解决了它，而是因为它是而且看起来很直接。我正在探索是否有一种方法可以以某种方式记录我想要更改的规则的索引值，最好是在样式表本身中。我将更新我的问题或发布关于我的发现的其他评论。@SimonT-就我个人而言，我非常喜欢你的方法，过去也曾推荐过。但是，要注意通过硬编码索引定位规则。在不同操作系统上的用户，其样式表或规则的索引与我预期的不同。最好是一次找到规则（或动态创建规则），然后保留对该规则的引用，而不是硬编码预期的索引。这是我问题底部的编辑部分。我找到了一种引用正确样式表的方法，而不知道它的定义顺序，也不知道它在样式表对象中的索引。让我知道您对修改后的方法的看法。如果我没有弄错，您可以给有问题的样式表一个

id

，然后