檢索或更改偽元素的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更改？

這種方法將來可能會破裂的可能性有多大？

對於那些使用不同版本的各種瀏覽器的人，請嘗試使用該片段並讓我知道它是否有效？

短發

---

編輯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

所以你怎么看？

Answer 1

操縱CSSRule而不是DOM元素是一種模糊但完全有效（和標准化 ）的方式來改變元素的風格。 它很難模糊，因為它很難，需要一個嵌套循環遍歷所有樣式表中的所有規則，以找到您想要更改的規則。 它也很模糊，因為它不具有超級價值 - 你通常可以通過訪問DOM元素的style屬性來完成同樣的事情。

但是，使用偽元素，沒有DOM元素。 偽元素是樣式規則的產物，因此操作偽元素的唯一方法是通過樣式規則。 人們建議添加樣式規則，因為這比查找樣式規則和編輯它更容易。 但查找和編輯它是完全有效的。

您可以通過添加樣式規則一次，然后保留對規則的引用並對該規則進行后續編輯，從而實現兩全​​其美。