编辑 2015-10-07 1624 CST
这个问题已被标记为可能重复 - 我发布它的原因是其他问题的答案都没有提供我想要的所有信息，我想要一种简单而直接的方法来做到这一点。我可以负责控制样式表和规则的顺序，以便引用正确的规则。我还希望得到关于这种方法在未来突破的可行性的反馈。
请查看我在下面发布的评论，了解我不接受可能重复问题的答案的其他原因。
** 原问题如下 **
我搜索了这样的问题，发现一些问题解决了部分问题，但没有同时检索和更改伪元素的 CSS 值，例如::before and ::after.
在来这里之前我已经用谷歌搜索过网络，基本上我发现没有理想的方法来做到这一点。
我找到了一种适用于 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 访问。
由于我阅读的答案发布后浏览器或 DOM 发生了更改，此方法是否可行？
这种方法将来失效的可能性有多大？
那些使用不同版本的各种浏览器的人能否尝试一下该代码片段并让我知道它是否有效？
Bob
编辑 2015-10-08 1352 CST
我修改了访问伪元素样式的方法，以便能够直接引用相关样式表，无论其定义顺序如何。
我会更改代码片段，但我没有找到为 css“样式表”提供 id 的方法。
相反，我会告诉你如何修改它。
1) 将定义正在使用的元素的 CSS 分开，并将其放在单独的文件中。
2) 代码 id= 上<link引用 CSS 文件的标记。在这种情况下我会使用 id="colorFlipFlop"
3) 更改 JavaScript 以引用或更改样式：
currentColor = document.styleSheets[0].cssRules[0].style.backgroundColor;
document.styleSheets[0].cssRules[0].style.backgroundColor = newColor;
To:
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
所以你怎么看？
