使用 jQuery 访问 css "：after" Select 器

发布于07月22日

我有以下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更改上、左和下边框的边框宽度.我要使用什么 Select 器来访问此元素？我try 了以下方法，但似乎不起作用.

$('.pageMenu .active:after').css(
        {
            'border-top-width': '22px',
            'border-left-width': '22px',
            'border-right-width': '22px'
        }
    )

推荐答案

您不能操作:after，因为从技术上讲，它不是DOM的一部分，因此任何JavaScript都无法访问.但是您can添加了一个新类，并指定了新的: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');

UPDATE:虽然不可能修改:after内容，但有一些方法可以使用JavaScript读取和/或覆盖它.请参阅100，以了解技术的全面列表.

Jquery相关问答推荐

Django BaseDataTableView-Filter_queryset方法不起作用

如何用 jQuery / AJAX 替换表格的行

ASP.NET Core 6 jQuery 验证不起作用

将元素附加到每个函数 jQuery

jQuery在localStorage时将类添加到正文

为什么我的 toFixed() 函数不起作用？

Facebook 风格的 JQuery 自动完成插件

使用 jQuery Select 焦点文本在 Safari 和 Chrome 中不起作用

如果 iframe src 无法加载，则捕获错误.错误：-拒绝在框架中显示 'http：//www.google.co.in/'..

如何使用 jQuery 更改文本

jQuery Button.click() 事件被触发两次

Jquery Ajax 错误处理忽略中止

Javascript 将 Markdown/Textile 转换为 HTML(理想情况下，返回 Markdown/Textile)

测试两个元素是否相同

使用 jQuery 比较两个 Javascript 对象数组

如何使用 jQuery 格式化电话号码

超时 jQuery 效果

由于滚动，响应表内的 bootstrap 按钮下拉菜单不可见

使用中键触发 onclick 事件

是否可以将 async：false 设置为 $.getJSON 调用

实用课程推荐