javascript - 使用 javascript(或 jQuery)选择和操作 CSS 伪元素,例如::before 和::after

标签 javascript jquery css jquery-selectors pseudo-element

有什么方法可以选择/操作 CSS 伪元素,例如 ::before::after (以及带有一个分号的旧版本)使用jQuery?

例如,我的样式表有以下规则:

.span::after{ content:'foo' }

如何使用 vanilla JS 或 jQuery 将“foo”更改为“bar”?

最佳答案

您还可以将内容传递给具有数据属性的伪元素,然后使用 jQuery 对其进行操作:

在 HTML 中:

<span>foo</span>

在 jQuery 中:

$('span').hover(function(){
    $(this).attr('data-content','bar');
});

在 CSS 中:

span:after {
    content: attr(data-content) ' any other text you may want';
}

如果你想防止“其他文本”出现,你可以将它与 seucolega 的解决方案结合起来,如下所示:

在 HTML 中:

<span>foo</span>

在 jQuery 中:

$('span').hover(function(){
    $(this).addClass('change').attr('data-content','bar');
});

在 CSS 中:

span.change:after {
    content: attr(data-content) ' any other text you may want';
}

关于javascript - 使用 javascript(或 jQuery)选择和操作 CSS 伪元素,例如::before 和::after,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52874946/

相关文章:

javascript - 调整 jquery 以保持幻灯片中的图像比例

css - 具有 3 个背景的容器,绝对 div 为父级的 100% 高度

jquery - SharePoint 2010 的多列全局导航下拉菜单

javascript - DOM 元素计算样式字体大小太小

javascript - 在 CEF/CefSharp 中禁用 "Content Security Policy"

javascript - amp 应用横幅在 Android 和 IOS 设备中不显示,工作正常

javascript - fancybox 2 图像刷新

javascript - Angular JS $http 请求?

javascript - 使用 Javascript 更新 HTML 表单中的隐藏输入

javascript - 如何检查 localStorage 值是否在数组中?