使用Jquery修改伪元素的css样式：after内容

发布于 2024-12-11 19:54:09 字数 411 浏览 0 评论 0原文

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

:after {
    content: "";
}

我需要用 Jquery 修改 left css 参数左右移动三角形。我知道我无法选择 DOM 之外的伪元素，但是还有另一种方法可以用 js 更改 :after 样式吗？

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

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

但它很难看

原文

I have baloon shape designed with CSS3.
JS Fiddle Example
It's have triangle made with

:after {
    content: "";
}

I need to moving triangle left-right with modify left css param with Jquery.
I know that i can't select pseudo element which out of DOM, but is there another way to change :after style with js?

Yes, we can put another div inside like

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

but it's ugly

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

谷夏 2024-12-18 19:54:09

有一个更简单的方法：只需将伪元素的 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!');

There is a much easier way: just set the pseudo element's content property value to attr(some-attribute-name), it will use the value of the HTML attribute on the parent as the content for the pseudo element. You can then use the setAttribute() method on the parent element to change the value dynamically. Below are mock snippets of how this method would look in action. I also did a blog post with further details that contains a live example fiddle.

CSS

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

HTML

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

JavaScript (to change pseudo content)

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

回复收藏 0 原文

再可℃爱ぅ一点好了 2024-12-18 19:54:09

您可以在头部动态插入 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 /

You insert the CSS styles dynamically in the head, and then modify that:

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

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

Here is a demo

http://jsfiddle.net/HWnLd/

回复收藏 0 原文

无名指的心愿 2024-12-18 19:54:09

根据此相关问题，您无法选择伪元素。因此，我建议定义额外的 CSS 类，并使用 jQuery 将类添加到气球中。例如，使用这样的类：

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

并像这样应用它：

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

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

As per this related question, you can't select the pseudo element. So I'd suggest defining additional CSS classes, and adding classes to the balloon with jQuery. E.g. use a class like this: