有什么方法来选择/操作CSS伪元素，如::before和::after(和旧版本的一个分号)使用jQuery?
例如，我的样式表有以下规则:
.span::after{ content:'foo' }
我怎么能改变'foo'到'酒吧'使用香草JS或jQuery?
当前回答
下面的解决方案告诉你如何用javascript的attr属性更新伪元素。
在HTML中添加一个属性，你可以用javascript setAttribute操作它。
<div
id="inputBoxParent"
count="0">
...
</div>
用js更新
inputBoxParent.setAttribute('count', value.length)
CSS -在伪元素中添加内容为attr(attributeName)
.input-box-container::after{
content: attr(count);
}
你完蛋了!!
const inputBoxParent = document.getElementById("inputBoxParent"); const handleOnChange = (value) => { inputBoxParent.setAttribute('count', value.length) } .input-box-container { position: relative; width: 200px; } .input-box-container::after{ position: absolute; bottom: 8px; right: 10px; height: 10px; width: 20px; content: attr(count); } <h4> Type some text inside the box and click outside to see resule i.e. pseudo element content change</h4> <div id="inputBoxParent" class="input-box-container" count="0"> <input type="text" id="inputBox" placeholder="type some thing" onchange="handleOnChange(this.value)" onkeyup="handleOnChange(this.value)" /> </div>
其他回答
我总是添加我自己的utils函数，就像这样。
function setPseudoElContent(selector, value) {
document.styleSheets[0].addRule(selector, 'content: "' + value + '";');
}
setPseudoElContent('.class::after', 'Hello World!');
或使用ES6功能:
const setPseudoElContent = (selector, value) => {
document.styleSheets[0].addRule(selector, `content: "${value}";`);
}
setPseudoElContent('.class::after', 'Hello World!');
尽管它们是由浏览器通过CSS呈现的，就像它们像其他真正的DOM元素一样，但伪元素本身不是DOM的一部分，因为伪元素，顾名思义，不是真正的元素，因此您不能直接使用jQuery(或任何JavaScript API，甚至是Selectors API)选择和操作它们。这适用于您试图用脚本修改其样式的任何伪元素，而不仅仅是::before和::after。
你只能在运行时通过CSSOM(想想window.getComputedStyle())直接访问伪元素样式，jQuery除了.css()之外不会公开它，这个方法也不支持伪元素。
不过，你总能找到其他方法，比如:
将样式应用到一个或多个任意类的伪元素上，然后在类之间切换(参看seucolega的回答以获得一个快速示例)——这是一种惯用的方法，因为它使用简单的选择器(伪元素没有)来区分元素和元素状态，这是它们打算使用的方式 通过修改文档样式表来操纵应用于上述伪元素的样式，这更像是一种hack
这是我第一次在给出我自己的答案之前没有阅读所有给出的答案，所以我希望这不会让我…
在我的情况下，这是需要的图标附加到一个，div和按钮元素，这与<i class="icon-class"></i>的工作有点不同，因为他们没有icon-class类。添加class="icon-class"会破坏样式。
相反，我为它们添加了一个数据图标属性，其中的值应该在element:: {content: "HERE"}之前，然后这个相当简单的JavaScript就会处理剩下的事情。
{
const fakeIcons = document.querySelectorAll('[data-icon]')
for (const iconElement of fakeIcons) {
const fakeClass = 'fake-' + Array.from(Array(20), () => Math.floor(Math.random() * 36).toString(36)).join('')
const beforeContent = iconElement.getAttribute('data-icon')
iconElement.classList.add(fakeClass)
const style = document.createElement('style')
style.type = 'text/css'
style.innerHTML = `
.${fakeClass}::before {
content: "${beforeContent}" !important;
}
`
document.getElementsByTagName('head')[0].appendChild(style)
}
}
代码解释道:
选择具有指定属性(data-icon)的所有元素 循环遍历它们 随机生成一个以fake-开头的类名，后面跟着一个随机的字母数字字符串 获取data-icon属性的值 向元素中添加随机生成的类 在伪元素设置内容之前为::创建样式 在<head> HTML元素的末尾添加样式
我有一些不同的东西给你，既简单又有效。
<style>
.case-after:after { // set your properties here like eg:
color:#3fd309 !important;
}
.case-before:before { // set your properties here like eg:
color:#151715 !important;
}
</style>
// case for after
$('#button-id').on('click', function() {
$(".target-div").toggleClass('case-after');
});
// case for before
$('#button-id').on('click', function() {
$(".target-div").toggleClass('case-before');
});
在jQuery中不能选择伪元素，因为它们不是DOM的一部分。 但是你可以在父元素中添加一个特定的类，并在CSS中控制它的伪元素。
例子
jQuery:
<script type="text/javascript">
$('span').addClass('change');
</script>
在CSS中:
span.change:after { content: 'bar' }
