Question

编辑2015-10-07 1624 CST

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

请查看我在下面发布的评论，原因是我没有接受可能重复问题的答案的其他原因。

**原始问题如下**

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

在来到这里之前，我已经使用Google搜索了网页，基本上我发现的是没有理想的方法来做到这一点。

我发现了一种适用于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更改？

此方法将来可能会破坏的可能性有多大？

那些使用不同浏览器版本的人请尝试使用该代码片段并让我知道它是否有效？

鲍勃

编辑2015-10-08 1352 CST

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

我会更改代码段，但我没有办法让css“stylesheet”成为id。

相反，我会告诉我如何修改它。

1）将定义所用元素的CSS分开，并将其放在一个单独的文件中。

2）代码id =在引用CSS文件的<link标签上。在这种情况下，我会使用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评论。

我觉得这使得功能更易于管理，更具防弹性。

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

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

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

所以 - 你怎么看？

Answer 1

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

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

通过添加一个样式规则，然后保留对该规则的引用并对该规则进行后续编辑，您可以充分利用这两个世界。

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

1 个答案: