使用jQuery访问css“:after”选择器

我有以下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)”以获得全面的技术列表。

2013-07-22 13:40:40

你可以在类似的html代码后添加样式:。例如:

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

2014-06-24 09:50:19

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

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

请参阅jQuery文档。

2015-02-11 23:38:19

使用jQuery访问css“:after”选择器

推荐文章

最新文章

标签