访问css“:after”选择器与jQuery [英] Access the css ":after" selector with jQuery
问题描述
我有以下css:
.pageMenu .active::after {
content: '';
margin-top: -6px;
display: inline-block;
width: 0px;
height: 0px;
border-top: 14px solid white;
border-left: 14px solid transparent;
border-bottom: 14px solid white;
position: absolute;
right: 0;
}
我想改变顶部,和底部边框使用jQuery。我使用什么选择器来访问此元素?我尝试以下但是似乎没有工作。
I'd like to change the border-width of the top, left, and bottom border using jQuery. What selector to I use to access this element? I tried the following but it doesn't seem to be working.
$('.pageMenu .active:after').css(
{
'border-top-width': '22px',
'border-left-width': '22px',
'border-right-width': '22px'
}
)
推荐答案
您不能操作:
之后,因为它在技术上不是DOM的一部分,因此任何JavaScript都无法访问。但您可以添加一个新类别,并指定
You can't manipulate :after
, because it's not technically part of the DOM and therefore is inaccessible by any JavaScript. But you can add a new class with a new :after
specified.
CSS :
.pageMenu .active.changed:after {
/* this selector is more specific, so it takes precedence over the other :after */
border-top-width: 22px;
border-left-width: 22px;
border-right-width: 22px;
}
JS:
$('.pageMenu .active').toggleClass('changed');
UPDATE:不可能直接修改:之后的
内容,有使用JavaScript读取和/或覆盖它的方法。请参阅 使用jQuery处理CSS伪元素(例如:before和:after) 一个全面的技术列表。
UPDATE: while it's impossible to directly modify the :after
content, there are ways to read and/or override it using JavaScript. See "Manipulating CSS pseudo-elements using jQuery (e.g. :before and :after)" for a comprehensive list of techniques.
这篇关于访问css“:after”选择器与jQuery的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!