使用insertRule动态管理样式-CSDN博客

本文链接：https://blog.csdn.net/worldtree_keeper/article/details/77185133

使用insertRule动态管理样式

用户自定义屏蔽广告经验总结：如何给一个页面添加一个通用的css规则？很多同学会选择以下方法.

var style = document.createElement("style"); 
style.innerHTML = "body {background:red}";
document.body.appendChild(style);

这是一个简单的好方法，但是不是唯一的方法。H5给我们提供了一个另一个选择，直接添加cssRule；好处:

可以动态添加样式规则，可以改变样式规则的先后顺序，已达到控制css权重的目的。
与添加的<style>不同的是，添加后的规则，不是已文本形式展现在node中。所以在element下无法查看，隐秘性？！ (^-^)

Example：

<!DOCTYPE HTML>
<html>
    <head>
        <style id="emptyRules"></style>
    <head>
    <body>
        <div class="testdiv">this is a test div</div>
        <script type="text/javascript">
            /**
            *   lets change the style by inserting Rule
            */
            var styleSheets = document.styleSheets;
            var currentStyleSheet = null;
            for (var i = 0; i < styleSheets.length; i++) {
                if (styleSheets[i].ownerNode && styleSheets[i].ownerNode.id === 'emptyRules') {
                    currentStyleSheet = styleSheets[i];
                    // There're arguments, 1: css rule 2: rule position
                    currentStyleSheet.insertRule('.testdiv {border:1px solid red;}', currentStyleSheet.cssRules.length);
                    break;
                }
            }
            if (currentStyleSheet) {
                setTimeout(function () {
                    currentStyleSheet.insertRule('.testdiv {border:1px solid green;}', 0);
                    document.querySelector('.testdiv').textContent = 'insert into position 0, border color not change to green';
                }, 2000);
                setTimeout(function () {
                    currentStyleSheet.insertRule('.testdiv {border:1px solid orange;}', currentStyleSheet.cssRules.length);
                    document.querySelector('.testdiv').textContent = 'insert into last position, border color change to orange';
                }, 4000);
            }
        </script>
    </body>
</html>