Javascript：MutationObserver / 检测全局样式表规则更改答案

【问题标题】：Javascript: MutationObserver / detect global stylesheet rule changesJavascript：MutationObserver / 检测全局样式表规则更改
【发布时间】：2016-12-11 01:34:04
【问题描述】：

在过去的几天里，我一直被困住，试图找出一种方法来检测/触发全局 CSS 更改事件。是的，一个全局的（所以不是由元素本身设置的 (style="background:red;" 例如），而是在单独的 .css 中设置> 文件）。

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

有什么建议吗？他们会很高兴的！

【问题讨论】：

查看全局 CSS 更改的示例可能会有所帮助，该更改是如何发生的，例如<link> 元素被添加到文档的 HEAD 中，或者是因为媒体查询等原因。
@wOxxOm 这听起来可能很真实，但很愚蠢。但我正在开发我自己的'开发者工具'，它最终可以嵌入到 JavaScript 应用程序中。这种“变化”是如何发生的，只需在开发工具（chrome / firebug 等）中实时编辑 CSS 文件，也不是从“样式”选项卡中实时编辑 CSS 文件（实际上与前面的相同）提到）。
我的意思是，即使您编辑了该文件，页面将如何准确地更新其链接样式表？因为没有内置的自动更新功能，所以我的问题意味着您可能可以检测到该事件。无论如何，MutationObserver 肯定不会检测到 CSS 规则的变化。
你是对的。编辑 CSS 文件不会在当前 DOM 中更新。我基本上是想弄清楚一个元素是否仍然附加了一个伪元素。那，我目前正在通过 window.getComputedStyle($(currentNode)[0], ':after').getPropertyValue("content") 做，它基本上告诉我属性'content'在 :after 选择器的给定节点上找到。但是由于伪元素不是 DOM 的一部分。我必须找到/激发一种方法来捕捉这些出现/消失（所以基本上如果它们被删除/添加，那么某些东西就会捕捉到这个事件）。
好吧，Chrome 扩展可以使用chrome.devtools.inspectedWindow.onResourceContentCommitted 事件监听器，所以我猜 FireFox 可能也有类似的东西......

标签： javascript css events stylesheet mutation-observers

【解决方案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;
        }
    }, '');

【讨论】：