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

Posted

技术标签:

【中文标题】修改伪元素的css样式:在Jquery内容之后[重复]【英文标题】:Modify css style for pseudo element :after content with Jquery [duplicate] 【发布时间】:2020-09-10 03:26:03 【问题描述】:

我的气球形状是用 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 签出我添加的新答案,它应该让这一切变得不那么复杂;)

以上是关于修改伪元素的css样式:在Jquery内容之后[重复]的主要内容,如果未能解决你的问题,请参考以下文章

CSS 中 ::before 和 ::after 伪元素的几个实际用途

css伪类和伪元素

CSS伪元素(:之前/:之后)的jQuery .click()事件?

jQuery CSS插件返回元素的计算样式以伪克隆该元素?

CSS3伪元素伪类选择器

jQuery