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

Question

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

Chrome 开发工具

在 chrome 开发工具中检查元素的样式会返回 2 个面板

1. 计算风格
2. 样式

样式面板有 3 种不同的样式类别：

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

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

这个updated fiddle 解释并演示了预期和不需要的结果

例子：

<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;
}

亚历山大指出了这个discussion about window.getMatchedCSSRules() returning null

有没有人提供插件或更复杂的功能让我检索 css 类和 domnode 的值？

Answer 1

是什么阻止您通过鼠标选择和复制（Ctrl-C，等等）侧边栏中“匹配的 CSS 规则”或“计算样式”部分的内容（我错过了您要解决的任务吗？）

将复制的内容粘贴到知名的 HTML 感知文本编辑器中存在一个已知问题（规则中的 CSS 属性呈现为编号列表，这实际上是各个编辑器中的错误），但如果您愿意要为 DOM 元素手动获取所有匹配的 CSS 规则/计算样式的副本，此工作流程应该适合您。

第三方编辑

在下面的评论中建议使用window.getMatchedCSSRules()。在 Chrome 62 中使用它会返回这个

VM1395:1 [弃用] 'getMatchedCSSRules()' 已弃用。更多 帮助，检查 https://code.google.com/p/chromium/issues/detail?id=437569#c2

discussion getMatchedCSSRules was started in november 2014 并包含此位 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 Object Model (CSSOM)

Answer 2

在 chrome 开发工具的“元素”选项卡中，如果您选择任何特定节点，它会在右侧面板中显示所有匹配的样式规则（包括单独匹配的规则，以及节点的整体计算样式)。