现在感觉我已经阅读了几乎整个堆栈溢出论坛,以找到任何更改伪元素 :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";
它变成了:
在酒吧之前有东西
现场示例 |源