利用CSSStyleSheet对象，完成控制style标签内容的
2021-07-17 本文已影响0人
JohnYuCN
1. 需求：
我们可能需要动态的添加或删除在网页style标签的内容， 如：
<head>
<style>
/* 此部分内容，希望由JS控制*/
</style>
</head>
此时，我们就可以添加或删除如@keyframes,从而达到精确的动画控制的技术
2. 控制原理：
document.styleSheets; 可以获取一个由CSSStyleSheet对象组成的数组，获取整个网页中所有的由style标签生成的所有对象，然后利用CSSStyleSheet的insertRule()和deleteRule()方法控制“规则”的插入和删除，而每个“规则”可以是字符串类型。
3. 案例：
<!DOCTYPE html>
<html lang="en">
<head>
<style>
/* document.styleSheets[0] */
</style>
<style>
/* document.styleSheets[1] */
</style>
</head>
<body>
<h1 class="fore bgc">可以由JS控制，向style标签中添加规则</h1>
<button>顺序加入前景和背景色</button>
<button>顺序去掉前景色和前景色</button>
<script>
// 获取一个CSSStyleSheet，对应的标签<style></style>
let sheet=document.styleSheets[0];
document.querySelector('button:first-of-type').addEventListener('click',function(){
let styleString='.fore{color:red}'
//相当于在style中加入一条规则：.fore{color:red}
sheet.insertRule(styleString,0)
styleString='.bgc{background-color:green}'
sheet.insertRule(styleString,1)
})
//只去掉第一条规则（前景色）
document.querySelector('button:last-of-type').addEventListener('click',function(){
sheet.deleteRule(0)
})
</script>
</body>
</html>
