Javascript 使用jQuery在选择器之前操作CSS

我正在尝试使用jQuery访问CSS

：before

和

：after

选择器。我尝试了一些方法，但似乎DOM看不到CSS选择器。我试图操纵的是给元素一个动态的

背景色

例如：

.className:before {background: red;}

在某个时候，我想将此颜色更改为动态：

$('.clasName:before').css('background-color', bgColor);   //this method doesn't work

我也试过：

$('.clasName').addClass('change').attr('data-background', bgColor); 
//this method works only for content property

CSS

---

它不起作用了。对于这个问题有什么特别的解决方法吗？

您不能用javascript更改伪元素的样式，但是您可以在

.className

中添加一个

，然后将其作为目标

$('.className span').css('background-color', bgColor);

---

您不能用javascript更改伪元素的样式，但可以在

.className

中添加一个

，然后将其作为目标

$('.className span').css('background-color', bgColor);

（函数（$）{
jQuery.fn.extend({
getPseudo：函数（pseudo，prop）{
var props=window.getComputedStyle(
$（this.selector）.get（0），pseudo
).getPropertyValue（道具）；
返回字符串（props）；
},
setPseudo:函数（_pseudo，_prop，newprop）{
var elem=$（本）；
var s=$（“风格”）；
var p=elem.getPseudo（_pseudo，_prop）；
console.log（p）
var r=p！==“”？新RegExp（p）：false；
变量选择器=$.map（元素，函数（val，键）{
返回[val.tagName，val.id]
？“#”+val.id:null，val.className？”。“+val.className”
：null]
});
var_setProp=“\n”+选择器.join（“”）
.concat（_伪）
.concat（“{”）
.concat（_prop+“：”）
.concat（newprop+“}；”；
（！！r？r.test（$（s）.text（））：r）？$（s）.text（函数（索引，属性）{
返回道具。更换（r，新道具）
})：$（s）.附加（_setProp））；
还这个
}
})
})（jQuery）；
$（“.className”）.setPseudo（“：before”，“background”，“blue”）
.className:before{
背景：红色；
内容：“123”；
}

abc
（函数（$）{
jQuery.fn.extend({
getPseudo：函数（pseudo，prop）{
var props=window.getComputedStyle(
$（this.selector）.get（0），pseudo
).getPropertyValue（道具）；
返回字符串（props）；
},
setPseudo:函数（_pseudo，_prop，newprop）{
var elem=$（本）；
var s=$（“风格”）；
var p=elem.getPseudo（_pseudo，_prop）；
console.log（p）
var r=p！==“”？新RegExp（p）：false；
变量选择器=$.map（元素，函数（val，键）{
返回[val.tagName，val.id]
？“#”+val.id:null，val.className？”。“+val.className”
：null]
});
var_setProp=“\n”+选择器.join（“”）
.concat（_伪）
.concat（“{”）
.concat（_prop+“：”）
.concat（newprop+“}；”；
（！！r？r.test（$（s）.text（））：r）？$（s）.text（函数（索引，属性）{
返回道具。更换（r，新道具）
})：$（s）.附加（_setProp））；
还这个
}
})
})（jQuery）；
$（“.className”）.setPseudo（“：before”，“background”，“blue”）
.className:before{
背景：红色；
内容：“123”；
}

abc
不能使用JavaScript设置伪元素样式。（有，但正如所说的，不要这样做。）不幸的是，：before和：after不是DOM的一部分，所以没有什么可查询选择的。如果您需要该级别的控制，则不应使用伪类内容。@Mike'Pomax'Kamerman应该可以通过更改
style
或
link
元素来实现text@JacobGray“不能使用JavaScript设置伪元素样式”请参见post@guest271314当然但是与使用jQuery中的
attr
或
css
调用进行的单个属性更改非常不同。这实际上就是发明新的CSS，然后重新绑定它（使用相关的文档回流，这很昂贵），您不能用JavaScript设置伪元素样式。（有，但正如所说的，不要这样做。）不幸的是，：before和：after不是DOM的一部分，所以没有什么可查询选择的。如果您需要该级别的控制，则不应使用伪类内容。@Mike'Pomax'Kamerman应该可以通过更改
style
或
link
元素来实现text@JacobGray“不能使用JavaScript设置伪元素样式”请参见post@guest271314当然但是与使用jQuery中的
attr
或
css
调用进行的单个属性更改非常不同。这实际上是发明了新的CSS，然后重新绑定它（与相关的文档回流，这是昂贵的），这对我来说很好，不得不重新设计一点CSS样式。但最终，这一切都很顺利。谢谢这对我来说很好，我不得不重新设计CSS的样式。但最终，这一切都很顺利。谢谢