思路:
直接在html中添加樣式覆蓋掉之前樣式規則
代碼
<!doctype html>
<html>
<head>
<style>
.main{
width:100px;
height:100px;
background:#000;
}
.main:after{
content:"hello world";
background:red;
}
</style>
</head>
<body>
<div class="main" onclick="change()"></div>
<script>
var s = document.createElement('style');
document.body.appendChild(s);
function change(){
s.innerText = ".main:after{background:blue}";
}
</script>
</body>
</html>
關鍵代碼:
var s = document.createElement('style');
document.body.appendChild(s);
s.innerText = ".main:after{background:blue}";