使用jQuery选择和操作CSS伪元素，例如:: before和:: after

Question

使用jQuery选择和操作CSS伪元素，例如:: before和:: after

有没有办法使用jQuery 选择/操作CSS伪元素，如::before和::after（以及带有一个分号的旧版本）？

例如，我的样式表具有以下规则：

.span::after{ content:'foo' }

如何使用jQuery将'foo'更改为'bar'？

Answer 1

您还可以使用data属性将内容传递给伪元素，然后使用jQuery来操作：在HTML中：<span>foo</span>在jQuery中：$('span').hover(function(){ &nbsp;&nbsp;&nbsp;&nbsp;$(this).attr('data-content','bar');});在CSS中：span:after&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;content:&nbsp;attr(data-content)&nbsp;'&nbsp;any&nbsp;other&nbsp;text&nbsp;you&nbsp;may&nbsp;want';}如果你想阻止“其他文本”出现，你可以将它与seucolega的解决方案结合起来，如下所示：在HTML中：<span>foo</span>在jQuery中：$('span').hover(function(){ &nbsp;&nbsp;&nbsp;&nbsp;$(this).addClass('change').attr('data-content','bar');});在CSS中：span.change:after&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;content:&nbsp;attr(data-content)&nbsp;'&nbsp;any&nbsp;other&nbsp;text&nbsp;you&nbsp;may&nbsp;want';}

Answer 2

虽然它们是由浏览器通过CSS呈现的，就好像它们就像其他真正的DOM元素一样，但伪元素本身不是DOM的一部分，因为伪元素，顾名思义，不是真正的元素，因此你不能使用jQuery（或任何JavaScript API，甚至是Selectors API）直接选择和操作它们。这适用于您尝试使用脚本修改其样式的任何伪元素，而不仅仅是::before和::after。您只能在运行时通过CSSOM（思考window.getComputedStyle()）直接访问伪元素样式，这不是jQuery之外的公开，.css()也不支持伪元素的方法。但是，您总能找到其他方法，例如：将样式应用于一个或多个任意类的伪元素，然后在类之间切换（请参阅seucolega的答案以获得快速示例） - 这是惯用的方式，因为它使用简单的选择器（伪元素不是）区分元素和元素状态，它们的使用方式通过更改文档样式表来操作应用于所述伪元素的样式，这更像是一种黑客攻击

Answer 3

您不能在jQuery中选择伪元素，因为它们不是DOM的一部分。但是您可以向父元素添加特定类并在CSS中控制其伪元素。例在jQuery中：<script&nbsp;type="text/javascript"> &nbsp;&nbsp;&nbsp;&nbsp;$('span').addClass('change');</script>在CSS中：span.change:after&nbsp;{&nbsp;content:&nbsp;'bar'&nbsp;}