修改伪元素的css样式：在Jquery内容之后[重复]

Posted 2023-02-22

【中文标题】修改伪元素的css样式：在Jquery内容之后[重复]

【英文标题】：Modify css style for pseudo element :after content with Jquery [duplicate]

【发布时间】：2011-12-14 12:04:25

【问题描述】：

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

制成的三角形

:after 
    content: "";

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

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

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

但是很丑

【参考方案1】：

有一个更简单的方法：只需将伪元素的content 属性值设置为attr(some-attribute-name)，它将使用父元素上的html 属性的值作为伪元素的内容。然后，您可以在父元素上使用setAttribute() 方法来动态更改值。下面是这个方法在实际中的样子的模拟 sn-ps。我还做了一个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!');

【讨论】：

我恢复了这篇文章，因为它确实提供了以前不存在的有用信息，但是当你发现重复时，请使用问题下的“标志”链接（你有足够的代表），让我们知道您认为哪个问题最好。然后，回答这个问题。我们通常会关闭帖子并将其合并为一个，因此回复所有帖子只会破坏该过程。此外，我们的社区对垃圾邮件非常敏感，因此请确保 1 - 如果链接断开，您的答案可以独立存在，并且 2 - 您在链接到网站时明确表明您是作者你拥有。

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

@csuwldcat 感谢您的提交。我需要使用 JS 创建的元素即时应用“新”内容。如果后面的元素追加/前置，这就可以解决问题。

我看不到如何使用此方法编辑 :after 伪元素的 CSS 属性。您只是在更改 psudo-element 内容，而不是其 CSS 样式属性。

正如@Andrew 提到的，我看不出这如何改变 :after 伪元素上的“left”属性。这不是被问到的吗？

【参考方案2】：

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

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

$('.pop').click(function(e)
  $("#dynamic").text(".pop:afterleft:" + e.offsetX+ "px;");
);

这是一个演示

http://jsfiddle.net/HWnLd/

【讨论】：

仍然相当 hack-ish，但肯定是最通用的解决方案。谢谢！

不幸的是，这仍然是 2 年后要走的路

【参考方案3】：

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

.pop.right:after 
    left: 80%;   

并像这样应用它：

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

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

【讨论】：

是的，它正在工作，但在这里你在 css 中设置硬位置值，但我需要用 JS 设置任何值，因为它是动态变化的

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

是的，我需要完美像素。我更喜欢双 div，但也许这里是绝妙的解决方案..

@nrabinowitz，不，不是我的情况。这是我的解决方案jsfiddle.net/EUHAv/3

@Shara 签出我添加的新答案，它应该让这一切变得不那么复杂；）