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

编辑2015-10-07 1624

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

看看我在下面发表的评论，关于我为什么不接受可能重复的问题的答案的其他原因。

**原问题接**

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

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

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

我看到的答案，在这里和其他地方在网络上，关于访问或改变CSS值的伪元素，说你不能直接访问这些项目，因为他们不是"DOM的一部分"answers"外部的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>

我意识到这取决于我知道样式表的顺序和其中的规则，但是我可以控制它。

这些似乎违背了我所看到的答案，这些答案说pseudo元素的CSS项不是DOM的一部分，因此不能通过DOM访问。

这种方法是可能的，因为浏览器或DOM的变化发生后，我读的答案被张贴?

这个方法在将来可能会中断的可能性是多少?

和那些与不同版本的各种浏览器请尝试片段，让我知道它是否工作?

鲍勃

---

编辑2015-10-08

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

我想改变代码片段，但我没有看到给css"样式表"一个id的方法。

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

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

2)引用CSS文件的<link标签上的Code 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

你觉得呢?