如何在 dom-node 上获取并提取匹配的 css 规则？
我想知道一种简单的方法来以编程方式获取某个 DOM 节点和子树上的所有 css 规则和类。
Chrome 开发工具
在 chrome 开发工具中检查元素的样式会返回 2 个面板
- 计算样式 样式
- 样式
面板有 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 的值吗？
I would like to know an easy way to get all the css rules and classes on a certain DOM node and the subtree programmatically.
Chrome Dev Tools
Inspecting the style of an element in the chrome dev tools returns 2 panels
- Computed Style
- Styles
The Styles-Panel has 3 different style categories:
- element.style
- Matched CSS Rules
- inherited from ....
The function window.getMatchedCSSRules comes quite close to the panel Matched CSS Rules in the dev-tools.
I want to iterate over an element and its children and add the matched css rules to a string.
This updated fiddle explains and demonstrates the expected and the unwanted result
Example:
<a class="one to many">
<span class="even more">foo</span>
<span class="way muchMore"> bar</span>
</a>
How can i get all the css-classes with the stylerules like this
a.one { color: red; }
.to { margin: 2em}
And so on. The following function comes quite close to the expected result:
// 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 pointed to this discussion about window.getMatchedCSSRules() returning null
Does anyone have a plugin or a more sophisticated function for me to retrieve the css classes and the values of a domnode?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
什么阻止您用鼠标选择和复制（Ctrl-C，等等）侧边栏中“匹配的 CSS 规则”或“计算的样式”部分的内容（我错过了您要解决的任务吗？）
是 将复制的内容粘贴到众所周知的 HTML 感知文本编辑器中会出现问题（规则内的 CSS 属性呈现为编号列表，这实际上是相应编辑器中的错误），但除此之外，如果您想手动获取所有你匹配的DOM 元素的 CSS 规则/计算样式，此工作流程应该适合您。
第三方编辑
在下面的评论中，建议使用
window.getMatchedCSSRules()。在 Chrome 62 中使用它会返回这个关于 getMatchedCSSRules 的讨论于 2014 年 11 月开始，并包含此位
getMatchedCSSRules 是非标准的，可能会在未来几个月内被删除。依赖它不利于跨浏览器互操作，因为像 Firefox 和 IE 这样的主流浏览器将不受支持。看来 M63 将开始删除它。另一种方法可能是使用 CSS 对象模型 (CSSOM)
What prevents you from mouse-selecting and copying (Ctrl-C, whatever) the contents of the "Matched CSS Rules" or "Computed Styles" section in the sidebar (am I missing the task you are trying to solve?)
There's a known issue with pasting the copied contents into well-known HTML-aware text editors (the CSS properties inside rules are rendered as a numbered list, which is actually a bug in the respective editors) but otherwise, if you want to manually grab a copy of all your matched CSS rules/computed style for a DOM element, this workflow should work for you.
3rd party edit
In the comment below it is recommended to use
window.getMatchedCSSRules(). Using it in Chrome 62 returns thisThe discussion getMatchedCSSRules was started in november 2014 and contains this bit
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.It seems that M63 will start to remove it.An alternative might be to use CSS Object Model (CSSOM)
在 Chrome 开发工具的“元素”选项卡中，如果选择任何特定节点，它会在右侧面板中显示所有匹配的样式规则（包括单独匹配的规则和节点的整体计算样式）。
In the 'Elements' tab of the dev tools in chrome, if you select any particular node, it displays all the matched Style rules in the panel to the right (both individually matched rules, and an overall computed style for the node).