jQuery的选择器访问CSS

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (55)

我有以下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访问。但是你可以添加一个新的: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');
用户回答回答于

你可以添加样式:在一个像HTML代码之后。 例如:

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

扫码关注云+社区

领取腾讯云代金券