编辑 2015-10-07 1624 CST
该问题已被标记为可能重复 - 我发布它的原因是其他问题的答案没有提供我想要的所有信息，并且我想要一种简单直接的方法来实现它。我可以控制样式表和规则的顺序，以便引用正确的规则。我还想得到有关此方法在将来是否会出现问题的反馈。
请查看我下面发布的评论，了解我为什么不接受可能重复问题的答案的其他原因。
** 原始问题如下 **
我搜索了类似于这样的问题，并找到了一些涉及部分问题但没有回答如何检索和更改像::before和::after这样的伪元素的CSS值的问题。
我在来这里之前用谷歌搜索过网络，基本上我发现没有理想的方法来做到这一点。
我找到了一种方法，在FF 40、IE 9和Chrome 45.0.2454.101 m中都有效，但我想知道是否忽略了某些可能导致我的方法在某些情况下出现问题的东西。
我在这里和其他网站上看到的有关访问或更改伪元素的CSS值的答案说，您不能直接访问这些项目，因为它们不是“DOM的一部分”且“DOM的外面”。
他们说，改变它们的唯一方法就是创建一个新规则，并将其附加到现有规则以覆盖编码值。
下面是演示该方法的代码片段：
function changeColor () { // Flip psedo element's background color
var newColor,
currentColor;
// Get the current color
currentColor= document.styleSheets[0].cssRules[0].style.backgroundColor;
// flip the color
newColor = (currentColor== "red") ? "aqua" : "red";
// Change the color
document.styleSheets[0].cssRules[0].style.backgroundColor = newColor;
// put color in top message
document.getElementById("colorIs").innerHTML = newColor;
// display colors
document.getElementById("displayColors").innerHTML =
"Pevious color was " + currentColor +
", changed to " + newColor + ".";
// Change background of button (not needed but thought I'd throw it in)
document.getElementById("changeButton").style.backgroundColor = newColor;
}#testDiv::before {
background-color: aqua;
content: "psedo element ";
}
#changeButton {
background-color: aqua;
}<div id="testDiv">
This divsion has an pseudo ::before element whose background color is
<span id="colorIs">
aqua
</span>
<br>
<br> Click "Display and Flip Color" to display the colors
<br> and flip the color from aqua and red and vice versa.
</div>
<br>
<form method="post">
<input id="changeButton" name="change" type="button" value="Display and Flip Color" onclick="changeColor();">
</form>
<br>
<div id="displayColors">
</div>这似乎与我看到的答案相矛盾，那些答案说伪元素的CSS项目不属于DOM的一部分，因此无法访问。
这种方法是否可能是由于浏览器或DOM更改而出现在我阅读的答案之后？
这种方法未来可能会出现什么问题？
不同版本的各种浏览器的用户是否可以尝试片段并告诉我它是否有效？
鲍勃
编辑2015-10-08 1352 CST
我修改了访问伪元素样式的方法，以便能够直接引用相关样式表，无论定义的顺序如何。
我要更改代码片段，但我不知道如何给CSS“样式表”赋予ID。
相反，我将告诉您如何修改它。
1) 分离定义使用的元素的CSS，并将其放入单独的文件中。
2) 在引用CSS文件的
<link标签上编写id =。在这种情况下，我将使用id =“colorFlipFlop”3) 将JavaScript更改为从这个引用或更改样式：
currentColor = document.styleSheets[0].cssRules[0].style.backgroundColor;
document.styleSheets[0].cssRules[0].style.backgroundColor = newColor;
致：
var beforeIndex = 0; // give a name to the index, in cssRules, of the rule we want to get and change.
var styleSheetObject = document.getElementById("colorFlipFlop"); // get a reference to the stylesheet object
currentColor = styleSheetObject.sheet.cssRules[beforeIndex].style.backgroundColor; // get current pseudo element background color
styleSheetObject.sheet.cssRules[beforeIndex].style.backgroundColor = newColor; // set new background color
我会在CSS和Javascript中完整记录所有这些内容，如果我认为有必要的话，在HTML中也会加注释，用尽可能多的注释来解释我正在做什么，如何做，以及为什么我要这样做。我称其为评论的WHW（谁、何、为什么）。我认为这使功能更易管理且更加牢固。
现在，您不再需要知道样式表对象的索引，因为每个元素都被清晰地分离出来，而且它仍然提供了一种直接访问和更改伪元素样式的方法，而无需创建和附加新规则。
在发布此编辑之前，我将制作一个包含CSS、JavaScript和HTML的文件，以实现代码段所做的事情并展示新的方法。我会将所有内容放在一个文件中，以便更容易地创建和FTP到网站。在真实的代码中，我会使用单独的CSS、JavaScript和HTML文件。
您可以在http://thetesting.site/flipFlopColor.html找到它。
那么，你觉得怎么样？