修改伪元素的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 伪元素的几个实际用途