我有以下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'
}
)
您不能操作:after,因为从技术上讲,它不是DOM的一部分,因此任何JavaScript都无法访问它。但是您可以使用new: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)”以获得全面的技术列表。
您不能操作:after,因为从技术上讲,它不是DOM的一部分,因此任何JavaScript都无法访问它。但是您可以使用new: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)”以获得全面的技术列表。