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>