4

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

4

1 回答 1

3

:before您可以使用or定义类: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";

它变成：

酒吧前有东西

实例| 资源

于 2013-11-07T15:57:42.567 回答