修改伪元素的css样式:在使用Jquery的内容之后

Question

我有用CSS3设计的气球形状.
JS小提琴示例 它有三角形

:after {
    content: "";
}

我需要使用Jquery 修改左 css param 来左右移动三角形.我知道我不能选择DOM中的伪元素,但还有另一种方法可以改变:用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/