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

JavaScript: Any chance or alternative to change the CSS Pseudo :before and :after?

本文关键字：机会 方案 after 改变 任何 CSS before JavaScript      更新时间：2023-09-26

现在感觉我已经阅读了几乎整个堆栈溢出论坛，以找到任何更改伪元素 ：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 的额外类吗？我试过了，但我得到了完全不同的结果。

您可以使用

: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";

它变成了：

在酒吧之前有东西

现场示例 |源

相关文章：