Javascript：MutationObserver / detect全局样式表规则更改

Question

过去几天我一直陷入困境，试图想出一种检测/触发全局CSS更改事件的方法。是的，一个全局的（不是由元素本身设置的（样式=＆＃34;背景：红色;＆＃34;例如），但是设置为单独的 .css 文件）。

我尝试过使用 MutationObserver （作为我的事件捕手/实例），但这个实例似乎并没有让我满意。最合乎逻辑的方式（根据我的知识），将存储所有CSS规则（目标文件）并设置一个间隔，每隔x秒检查一次更新（比较存储的列表）。但当然，这不是一个很好的做法，因为这是浪费记忆。

有什么建议吗？他们会很熟悉！

Answer 1

我发现这个功能非常有用。但我不确定它会触发你想要的方式。

我发现这可以检测到检查器中所做的更改（但我读到由于安全原因可能会出现伪类的问题，因为您可以检测到是否访问了链接。）

返回一个规则，如：body {color：red;}

document.styleSheets[0].cssRules[0].cssText;

或者这将返回所有附加的样式表。

var allCSS = 
    [].slice.call(document.styleSheets)
    .reduce(function (prev, styleSheet) {
        if (styleSheet.cssRules) {
            return prev +
                [].slice.call(styleSheet.cssRules)
                    .reduce(function (prev, cssRule) {
                        return prev + cssRule.cssText;
                    }, '');
        } else {
            return prev;
        }
    }, '');