JavaScript：有任何机会或替代方法来更改 CSS Pseudo :before 和 :after 吗？答案

【问题标题】：JavaScript: Any chance or alternative to change the CSS Pseudo :before and :after?JavaScript：有任何机会或替代方法来更改 CSS Pseudo :before 和 :after 吗？
【发布时间】：2013-11-07 15:54:47
【问题描述】：

现在感觉我已经阅读了几乎整个 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? 我试过了，但结果完全不同。

【问题讨论】：

您可以随时使用所需的任何新 CSS 创建一个全新的 <style> 元素。
伪元素不是 DOM 的一部分，它们是由样式表创建的，因此无法使用 javascript 访问。常规类并没有真正做同样的事情，所以用 JS 真正改变伪元素的唯一方法是在 head 部分插入一个新的样式标签。

标签： javascript css pseudo-element

【解决方案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";

它变成：

酒吧前有东西

Live Example | Source

【讨论】：