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

Question

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

Chrome 开发工具

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

1. 计算风格
2. 风格

样式面板有 3 个不同的样式类别:

• 元素样式
• 匹配的 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 [Deprecation] 'getMatchedCSSRules()' is deprecated. For more help, check https://code.google.com/p/chromium/issues/detail?id=437569#c2

discussion getMatchedCSSRules was started in november 2014并包含此位 getMatchedCSSRules 是非标准的，可能会在未来几个月内删除。依赖它对跨浏览器互操作不利，因为将不支持 Firefox 和 IE 等主要浏览器。 看来 M63 将开始删除它。

替代方法可能是使用 CSS Object Model (CSSOM)