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

Question

编辑2015-10-07 1624 CST

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

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

**原始问题如下**

我搜索了这样的问题,发现一些问题解决了问题的一部分,但没有检索和更改伪元素的CSS值,如::before和::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更改？

这种方法将来可能会破裂的可能性有多大？

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

短发

---

编辑2015-10-08 1352 CST

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

我会更改片段,但我没有看到一种方法给css"stylesheet"一个id.

相反,我会告诉我如何修改它.

1)分离定义正在使用的元素的CSS并将其放在单独的文件中.

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

所以你怎么看？

Answer 1

操作CSSRuleDOM 元素而不是 DOM 元素是更改元素样式的一种晦涩但完全有效（且标准化）的方法。它之所以晦涩难懂，是因为它很困难，需要一个嵌套循环遍历所有样式表中的所有规则才能找到您想要更改的规则。它之所以晦涩难懂还因为它不是非常有价值——通常只需访问 DOM 元素的style属性即可完成同样的事情。

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

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