[英]Retrieving or changing css rules for pseudo elements
编辑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更改?
这种方法将来可能会破裂的可能性有多大?
对于那些使用不同版本的各种浏览器的人,请尝试使用该片段并让我知道它是否有效?
短发
编辑2015-10-08 1352 CST
我修改了访问伪元素样式的方法,以便能够直接引用相关样式表,而不管它的定义顺序如何。
我会更改片段,但我没有看到一种方法给css“stylesheet”一个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中,我认为有必要解释我在做什么,我是怎么做的,以及为什么我是按照我这样做的方式去做 - 我称之为WHW评论。
我觉得这使得功能更易于管理,更具防弹性。
您现在不再需要样式表对象的索引,所有内容都与页面上的其他内容完全分开,并且它仍然提供了访问和更改伪元素样式的直接方法,而无需创建和附加新规则。
在发布此编辑之前,我将编写一个包含CSS,JavaScript和HTML的文件,以实现代码片段显示新方法的功能。 我会将所有内容放在一个文件中,以便更轻松地创建和FTP到网站。 在现实世界的代码中,我使用单独的CSS,JavaScript和HTML文件。
它将在http://thetesting.site/flipFlopColor.html
所以你怎么看?
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.