访问css“;:after"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改变顶部、左侧和底部边界的边界宽度。我用什么选择器来访问这个元素?我尝试了下面的方法，但似乎没有效果。

$('.pageMenu .active:after').css(
{
'border-top-width': '22px',
'border-left-width': '22px',
'border-right-width': '22px'
}
)
584030 次浏览
小开
最佳答案

你不能操作:after，因为它在技术上不是DOM的一部分，因此任何JavaScript都无法访问它。但是你可以添加了一个新类，并指定了一个新的:after。

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');

虽然直接不可能修改:after内容，但有一些方法可以使用JavaScript读取和/或覆盖它。有关技术的全面列表，请参见"使用jQuery操纵CSS伪元素(例如:before和:after)"< / >。

小开

你可以为:在添加一个类似html代码的样式 例如:< / b >

var value = 22;
body.append('<style>.wrapper:after{border-top-width: ' + value + 'px;}</style>');
小开

如果你使用jQuery内置的空值after()，它将创建一个与你的:after CSS选择器匹配的动态对象。

$('.active').after().click(function () {
alert('clickable!');
});

参见jQuery文档。


提交答案