JavaScript:改变 CSS 伪 :before 和 :after 的任何机会或替代方法？

Question

现在感觉我已经阅读了几乎整个 stackoverflow 论坛以找到更改伪元素 :after 和 :before 的任何解决方案。

根据我的理解:它无法更改，因为当浏览器显示它时，它不在 DOM 中。但是它在哪里呢？在浏览器内存中？？？

没关系，似乎无法使用 :after/:before 抓取伪元素。

所以我尝试了另一种方式:

// read CSS value      
var color = window.getComputedStyle(document.querySelector('.myCssClass'), ':before').getPropertyValue('background-color');
// write CSS value
window.getComputedStyle(document.querySelector('.myCssClass'), ':before').setProperty('background-color', "#FF0000");

但是……浏览器并没有高兴，而是返回:

NoModificationAllowedError: Modifications are not allowed for this document

我的天啊!!!所以似乎没有解决方法来改变这些东西。

那么现在我的大问题是:CSS还有其他方法吗？创建一个额外的类，其行为类似于 :after/:before?我试过了，但得到了完全不同的结果。

Answer 1

您可以使用 :before 或 :after 定义类(如下例)。浏览器还通过类似数组的 document.styleSheets 提供样式表。每个工作表都包含规则(这些规则位于属性 rules 或 cssRules 中，具体取决于浏览器)。可以修改规则。

但这比在样式表中定义它然后使用类来操作它更困惑:

.foo:before {
    content: "before foo ";
}
.bar:before {
    content: "before bar ";
}

例如，这个 HTML:

<div class="foo">there is stuff</div>

看起来像这样:

before foo there is stuff

And then you can change it:

document.querySelector(".foo").className = "bar";

它变成了:

before bar there is stuff

Live Example | Source