使用Jquery修改伪元素:after的内容和CSS样式

Question

我用CSS3设计了一个气球形状。
JS Fiddle示例 它有一个由三角形构成的部分。

:after {
    content: "";
}

我需要用Jquery将三角形左右移动并修改left CSS参数。 我知道无法选择DOM之外的伪元素，但是否有另一种方法使用JS更改:after样式？

是的，我们可以在内部放置另一个div。

<div class="pop"><div class="arr"></div></div>

但是它很丑

- Shara

Answer 1

有一种更简单的方法：只需将伪元素的content属性值设置为attr(some-attribute-name)，它将使用父元素上HTML属性的值作为伪元素的内容。然后，您可以在父元素上使用setAttribute()方法动态更改该值。以下是模拟示例，演示此方法的用法。我还写了一个博客文章，其中包含详细信息和实时示例代码。

CSS

#SomeElement:after {
    content: attr(some-attribute-name);
}

HTML

<div id="SomeElement" some-attribute-name="Pseudo content here!"></div>

JavaScript (更改伪内容)

var someElement = document.getElementById('SomeElement');
someElement.setAttribute('some-attribute-name', 'New pseudo content here!');

- csuwldcat

---

我恢复了这篇文章，因为它提供了之前没有的有用信息，但是请在您发现重复问题时使用问题下方的“标记”链接（您有足够的声望），并告诉我们哪个问题是最好的。然后回答那个问题。我们经常关闭和合并帖子，因此回答所有帖子只会破坏这一过程。另外，我们的社区非常敏感于垃圾邮件，因此请确保：1 - 您的答案如果链接断开也可以独立存在，2 - 当链接到您拥有的网站时，请明确表明您是作者。 - Tim Post

有人知道这个方法的浏览器支持情况吗？ - Gavin

我看不出如何使用这种方法编辑:after伪元素的CSS属性。你只是改变了伪元素的内容，而不是它的CSS样式属性。 - andreszs

太棒了，这正是我正在寻找的（而且很难找到这种知识！） - Gershom Maes

正如@Andrew所提到的，我不明白这如何改变:after伪元素上的“left”属性。那不是被要求的吗？ - Garconis

Answer 2

您可以在头部动态插入CSS样式，然后进行修改：

$("<style type='text/css' id='dynamic' />").appendTo("head");

$('.pop').click(function(e){
  $("#dynamic").text(".pop:after{left:" + e.offsetX+ "px;}");
});

这是一个演示

http://jsfiddle.net/HWnLd/

- methodofaction

---

仍然有些粗糙，但肯定是最通用的解决方案。谢谢！ - Daniel

很遗憾，即使过了2年，这仍然是必须采取的方式。 - Benjamin Intal

Answer 3

根据相关问题所述，您无法选择伪元素。因此，我建议定义附加的CSS类，并使用jQuery向气球添加类。例如，使用以下类：

.pop.right:after {
    left: 80%;   
}

然后像这样应用：

$('div.pop').addClass('right');

工作的jsFiddle：http://jsfiddle.net/nrabinowitz/EUHAv/2/

- nrabinowitz

---

是的，它可以工作，但是在这里你在CSS中设置了硬位置值，但我需要使用JS设置任何值，因为它是动态变化的。 - Shara

@Shara - 你真的需要它完美无缺吗？或者你可以创建10个类，让jQuery在它们之间进行选择？ - nrabinowitz

是的，我需要像素级精度。我更喜欢双倍div，但也许这里有更好的解决方案。 - Shara

@nrabinowitz，不是在我的情况下。这是我的解决方案http://jsfiddle.net/EUHAv/3/。 - Shara

@Shara 看看我添加的新回答，它应该会让所有这些变得简单许多 ;) - csuwldcat