从 javascript 更改 :before 选择器

Question

如何从 javascript 更改 #abc 样式的 :before 内容？

<script>
document.getElementById('abc').style.content='-';
</script>

<style>
#abc:before{content:"+";}
</style>

Answer 1

不，您无法通过 javascript 访问:before或:after，因为它们不是 DOM 的一部分。但是，您仍然可以通过使用 CSS 类来实现您的目标：

<script>
    document.getElementById('abc').className = "minus";
</script>

<style>
    #abc:before {content: "+";}
    #abc.minus:before {content: "-"}
</style>

事实上，这种方法更不引人注目，因为您不会将表示与 javascript 混合。明天您可能想要更改文本“+/-”来表示漂亮的背景图像，在这种情况下您根本不需要接触 javascript 代码。