Question

我有用CSS3设计的气球形状 JS Fiddle Example 它是用

制作的三角形

: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()方法动态更改值。下面是这个方法在行动中的模拟摘要。我还做了一个blog post with further details，其中包含一个实例小提琴。

<强> 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

根据this related question，您无法选择伪元素。所以我建议定义其他CSS类，并使用jQuery向气球添加类。例如。使用这样的类：

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

并像这样应用：

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

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

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

3 个答案: