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

How to get and extract matched css rules on dom-node?

本文关键字：css 规则 提取 dom-node 获取      更新时间：2023-09-26

我想知道一个简单的方法来获得所有的css规则和类在一个特定的DOM节点和子树编程。

Chrome Dev Tools

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

    <
  1. 计算风格/gh>

style - panel有3个不同的样式类别:

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

Alexander指出了关于window.getMatchedCSSRules()返回null的讨论

是否有人有一个插件或更复杂的功能为我检索css类和domnode的值?

是什么阻止你在侧边栏中鼠标选择和复制(Ctrl-C，无论什么)"匹配的CSS规则"或"计算样式"部分的内容(我错过了你想要解决的任务吗?)

将复制的内容粘贴到已知的支持html的文本编辑器中存在一个已知的问题(规则中的CSS属性呈现为编号列表，这实际上是各自编辑器中的一个bug)，但是，如果您想手动抓取所有匹配的CSS规则/计算样式的副本为DOM元素，这个工作流应该为您工作。

第三方编辑

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

VM1395:1 [Deprecation] '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)

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

相关文章：