Question

如何更改：来自javascript的#abc样式的内容之前？

<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代码。

Answer 2

据我所知，你不能改变它，因为它是一个伪元素而不是DOM的一部分。你可以做的就是在规范之前添加另一个与javascript分开的类。

请查看此问题是否可以帮助您解决问题Changing width property of a :before css selector using JQuery

Answer 3

jQuery无法在内容之前设置css属性：因为它不包含在元素中。如果你想在使用javascript的内容之前操作：的颜色，你可以创建一个额外的css类，并添加/删除这个类。

Answer 4

所以将#abc更新为

#abc {
content: attr(data-before);
}

并确保#abc引用的元素具有数据属性，例如

然后在你的js中，你可以使用HTML数据API访问data-before属性，当你修改它时，内容也会改变。

这有意义吗？

从javascript更改：before选择器

4 个答案: