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

Question

编辑 2015-10-07 1624 CST

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

请查看我在下面发布的 cmets，了解我不接受可能重复问题的答案的其他原因。

**原始问题如下**

我搜索了一个这样的问题，并找到了一些解决部分问题的问题，但没有同时检索和更改 ::before 和 ::after 等伪元素的 CSS 值。

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

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

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

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

这是一个演示方法的sn-p：

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 更改，这种方法是否可行？

这种方法将来失效的可能性有多大？

如果有不同版本的浏览器，请尝试sn-p，让我知道它是否有效？

鲍勃

---

编辑 2015-10-08 1352 CST

我已经修改了访问伪元素样式的方法，以便能够直接引用相关样式表，而不管它的定义顺序如何。

我会更改 sn-p，但我看不到给 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 中完整记录所有这些，并使用我认为必要的尽可能多的 cmets 来解释我在做什么、我是如何做的，以及为什么我要这样做 - 我称之为评论的 WHW。

我觉得这使功能更易于管理且更安全。

您现在不再需要样式表对象的索引，所有内容都与页面上的所有其他内容巧妙地分开，并且它仍然提供了一种直接访问和更改伪元素样式的方法，而无需创建和附加新规则。

在发布此编辑之前，我将创建一个包含 CSS、JavaScript 和 HTML 的文件，以实现 sn-p 显示新方法的功能。我会将所有内容放在一个文件中，以便更轻松地创建和 FTP 到站点。在现实世界的代码中，我会使用单独的 CSS、JavaScript 和 HTML 文件。

它将在http://thetesting.site/flipFlopColor.html

那么 - 你怎么看？

Answer 1

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

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

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