测试代码如下
<!doctype html>
<title>javascipt修改css级联样式表类和伪类样式</title>
<style>
.exampleA{color:Blue}
.exampleA:before {content:"-";color:red;font-size:20px;font-weight:bold}
</style>
<script>
function changecss(theClass, element, value) {
var sl = document.styleSheets.length;
if (sl == 0) return;
var isPseudo = theClass.indexOf(':') != -1;
if (window.IE8) theClass = theClass.replace(/:+/g, ':');
else theClass = theClass.replace(/:+/g, '::');
var cssRules = document.styleSheets[0].rules ? 'rules' : 'cssRules';
for (var i = 0; i < sl; i++) {
for (var j = 0, rl = document.styleSheets[i][cssRules].length; j < rl; j++) {
if (document.styleSheets[i][cssRules][j].selectorText == theClass) {
if (isPseudo)
document.styleSheets[i].addRule ?
document.styleSheets[i].addRule(theClass, element + ':' + value) :
document.styleSheets[i].insertRule(theClass + '{' + element + ':' + value + '}', rl);
else document.styleSheets[i][cssRules][j].style[element] = value;
break;
}
}
}
}
</script>
<span class="exampleA">Example A</span><br />
<span class="exampleB">Example B</span><br />
<span class="exampleA">Example A</span><br />
<input type="button" value="修改exampleA为红色" onclick="changecss('.exampleA','color','red')"/>
<input type="button" value="修改exampleA为黑色" onclick="changecss('.exampleA','color','black')" />
<input type="button" value="修改exampleA:before伪类color为blue" onclick="changecss('.exampleA::before','color','blue')" />
<input type="button" value="修改exampleA:before伪类color为red" onclick="changecss('.exampleA::before','color','red')" />
来源:
javascipt修改css级联样式表类和伪类样式_JavaScript/Ajax开发技巧_Web开发网
https://www.w3dev.cn/article/20130624/javascript-modify-css-stylesheet-class.aspx