html - 修改伪元素的css样式：使用Jquery的内容之后

Question

我有用 CSS3 设计的气球形状。
JS Fiddle 示例 它的三角形是用

:after {
    content: "";
}

我需要使用 Jquery修改左css 参数来左右移动三角形。我知道我不能选择 DOM 之外的伪元素，但是还有另一种方法可以改变 :after style with js？

是的，我们可以在里面放另一个 div

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

但这很丑

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!');

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/

Answer 3

根据这个相关问题，您不能选择伪元素。所以我建议定义额外的 CSS 类，并使用 jQuery 向气球添加类。例如使用这样的类：

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

并像这样应用它：

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

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