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的额外类？ 我尝试了，但结果完全不同。

- Timo.Klement

---

你可以随时创建一个全新的<style>元素，使用任何你需要的新CSS。 - Pointy

伪元素不是DOM的一部分，它们是由样式表创建的，因此无法使用JavaScript访问。普通类并不能真正做到同样的事情，因此真正改变伪元素的唯一方法是通过将新的样式标签插入到头部部分。 - adeneo

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>

看起来像这样：

在foo之前有一些东西

然后你可以改变它：

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

然后变成：

bar之前有一些东西

实例 | 源代码

- T.J. Crowder