Javascript:MutationObserver/检测全局样式表规则更改

Javascript: MutationObserver / detect global stylesheet rule changes

本文关键字：规则 样式 全局 MutationObserver 检测 Javascript      更新时间：2023-09-26

在过去的几天里，我一直在努力寻找检测/触发全局CSS更改事件的方法。是的，全局的(所以不是由元素本身设置的(例如style="background:red；"(，而是在单独的.css文件中设置的(。

我尝试过使用MutationObserver(作为我的事件捕获器/实例(，但这个实例似乎没有让我感到满足。相反，最合乎逻辑的方法(据我所知(是存储(目标文件的(所有CSS规则，并设置一个间隔，每隔x秒检查一次更新(比较存储的列表(。但当然，这不是一个好的做法，因为这是浪费内存。

有什么建议吗？他们会出现很多！

我发现这个函数非常有用。但我不确定它是否会触发你想要的方式。

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

返回一个规则，如：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;
        }
    }, '');
相关文章：