有什么方法来选择/操作CSS伪元素，如::before和::after(和旧版本的一个分号)使用jQuery?
例如，我的样式表有以下规则:
.span::after{ content:'foo' }
我怎么能改变'foo'到'酒吧'使用香草JS或jQuery?
当前回答
下面是访问:after和:before样式属性的方法，在css中定义:
// Get the color value of .element:before
var color = window.getComputedStyle(
document.querySelector('.element'), ':before'
).getPropertyValue('color');
// Get the content value of .element:before
var content = window.getComputedStyle(
document.querySelector('.element'), ':before'
).getPropertyValue('content');
其他回答
下面是访问:after和:before样式属性的方法，在css中定义:
// Get the color value of .element:before
var color = window.getComputedStyle(
document.querySelector('.element'), ':before'
).getPropertyValue('color');
// Get the content value of .element:before
var content = window.getComputedStyle(
document.querySelector('.element'), ':before'
).getPropertyValue('content');
$ (' .span ')。attr(“data-txt”、“foo”); $ (' .span ')。点击(函数(){ (美元)。Attr ('data-txt'，"任何其他文本"); }) .span { ｝ .span:{后 内容:attr (data-txt); ｝ < script src = " https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js " > < /脚本> < div class =“跨度”> < / div >
一种有效但不太有效的方法是在文档中添加带有新内容的规则，并用类引用它。根据需要，类可能需要为内容中的每个值提供唯一的id。
$("<style type='text/css'>span.id-after:after{content:bar;}</style>").appendTo($("head"));
$('span').addClass('id-after');
我总是添加我自己的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!');
只需要在之前或之后设置伪样式来继承，然后用javascript设置父样式。
例如，我想改变:before的颜色样式，然后我设置:
.my-style::before{
color: inherit;
}
然后我用javascript改变了.my-style元素的颜色样式:
document.querySelector(".my-style").style.color = red;
工作完成了，超级简单
