如何在dom-节点上获取和提取匹配的css规则？

Question

我想知道一种简单的方法，可以通过编程方式获取某个DOM节点和子树上的所有css规则和类。

铬开发工具

检查chrome工具中元素的样式将返回2个面板。

1. 计算样式
2. 样式

样式-面板有三个不同的样式类别：

• element.style
• 匹配CSS规则
• 继承自..。

函数window.getMatchedCSSRules非常接近开发工具中与面板匹配的CSS规则。我想迭代一个元素及其子元素，并将匹配的css规则添加到字符串中。

这个更新小提琴解释并演示了预期的和不需要的结果。

示例：

<a class="one to many">
    <span class="even more">foo</span>
    <span class="way muchMore"> bar</span>
</a>

如何使用这样的样式获得所有css-类？

a.one { color: red; }
.to { margin: 2em}

诸若此类。以下功能非常接近预期结果：

// el = a DOM-Node document.getElementById(id);
function getCssText(el) {
    var cssText = "";
    var cssRuleList = window.getMatchedCSSRules(el, '');
    for (var i = 0; i < cssRuleList.length; i++) {
        cssText += cssRuleList[i].cssText + " ";
    }
    return cssText;
}

亚历山大指出了这个关于window.getMatchedCSSRules()返回null的讨论

有人有插件或者更复杂的函数来检索css类和domnode的值吗？

Answer 1

是什么阻止了鼠标选择和复制(Ctrl，无论如何)侧边栏中的“匹配CSS规则”或“计算样式”部分的内容(我是否遗漏了您试图解决的任务？)

将复制的内容粘贴到众所周知的HTML文本编辑器中有一个已知的问题(规则中的CSS属性被呈现为编号列表，这实际上是相应编辑器中的一个错误)，但否则，如果您想手动获取DOM元素的所有匹配的CSS规则/计算样式的副本，这个工作流应该适合您。

第三方编辑

在下面的注释中，建议使用window.getMatchedCSSRules()。在Chrome 62中使用它会返回以下内容

is 1395:1不推荐使用'getMatchedCSSRules()‘。有关更多帮助，请查看https://code.google.com/p/chromium/issues/detail?id=437569#c2

讨论getMatchedCSSRules于2014年11月开始并包含此位getMatchedCSSRules is non-standard and likely to be removed in the coming months. Relying on it is bad for cross-browser interop since major browsers like Firefox and IE won't be supported.，似乎M63将开始删除它。

另一种选择可能是使用CSS对象模型(CSSOM)

Answer 2

在chrome中dev tools的“Elements”选项卡中，如果您选择了任何特定的节点，它就会在面板右侧显示所有匹配的样式规则(这两个规则都是单独匹配的规则，以及节点的总体计算样式)。