logo标签列表

使用jQuery创建CSS的:after伪元素

jquerycss
6

我需要动态创建元素的CSS样式。然而，我需要在CSS中使用:after伪类，并听说jQuery无法修改它。

这是真的吗？有没有什么办法绕过去？

3个回答
15

您可以生成一个<style>标签并将其插入到<head>中：

http://jsfiddle.net/PrBHF/

$("head").append($('<style>div:after { content: " World" }</style>'));
这在所有浏览器中都不起作用，特别是在Internet Explorer中。 - ShankarSangoli
这里有替代方法：https://dev59.com/c3VC5IYBdhLWcg3wYQEp - thirtydot
@ShankarSangoli：这个答案适用于IE8/9。由于不支持:after，它在任何更低版本中都无法工作。 - thirtydot
1
关于浏览器支持：由于问题本身涉及到:after，因此浏览器支持并不是问题/答案的一部分。 - Ates Goral
@ShankarSangoli 你可以随便叫我什么，但我已经不再关心Internet Explorer不能像其他浏览器一样正常工作的问题了，尤其是旧版本。如果人们仍然使用IE6并且还不戴头盔骑自行车，那就让他们去吧。我不再在意了。 - Chris S.
6

为什么要使用JavaScript创建CSS？

将所需的样式放入CSS类中，然后使用jQuery的addClass方法应用该类。

5

这是真的吗？

是的。使用 :after 创建的伪元素不是DOM的一部分，因此无法被选择。

有没有办法绕过这个问题？

没有。除非你不使用 :after（使用一个实际的元素，然后就可以选择它/绑定事件）。

编辑

重新阅读了您的问题后，我认为您实际上想知道是否可以使用jQuery将 :after 样式应用于元素。答案仍然是不行的，尽管您可以使用 addClass 将新类添加到元素中，并为该类名称定义 :after 样式。

再次编辑

当我说“不行”时，似乎我并不完全正确...请参见 @AtesGorals 的回答，那是一个很好的解决方法。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接