时间戳

首页 > 解决方案 > 从任何给定元素中提取 CSS 规则

javascript - 从任何给定元素中提取 CSS 规则

问题描述

我正在尝试找到一种从任何给定元素中提取所有 css 规则的方法（我可以完全访问 html 和 css）。

我研究了其他解决方案，例如 getComputedStyle，但是，它对某些属性（例如宽度或高度）没有多大帮助。例如，我希望它在适用时返回 width: 100%，但它总是返回以 px 为单位的实际宽度值。我需要的是 CSS 规则定义，而不是它在浏览器上的实际呈现方式。

我最后的手段是使用一些css-inliner，例如juicejs，然后我可以访问element.style.prop，但我认为如果这些js inliners可以将css规则转换为内联css，那么他们一定已经提取了css规则? 我试图查看它的源代码，但如果有任何模块可以完成这项工作，那将比尝试从该库中提取代码要好得多。

标签： javascripthtmlcssdata-extraction

解决方案

令我惊讶的是，没有多少解决方案可以解决这个问题。我最终找到了两个都有效的解决方案（可能有一些边缘情况，但我还没有遇到过）

选项 1：此处发布的 getMatchedCSSRules 实现： https ://stackoverflow.com/a/37958301/821517

优点：简洁明了

缺点：不支持伪选择器（还）

选项 2：这里提到的一个非常多的名为 CSSUtilities 的库： https ://stackoverflow.com/a/12023174/821517

优点：它可以处理伪选择器

缺点：非常非常古老的库，它依赖于另一个已弃用的库。

我最终使用了 CSSUtilities，我不得不进行一些更改（修改）以使其与新的 js 引擎一起使用。我在这里发布了两个修改过的文件，希望它可以帮助其他人（并且可以发现我犯的错误并提出修复建议）

  1. 新文件：https ://gist.github.com/yellow1912/c9dbbab97497ec42489be55e8abe73c7
  2. 请确保您访问此链接以下载包含文档文件的软件包：http ://www.brothercake.com/site/resources/scripts/cssutilities/

推荐阅读