如何为任意 HTML 代码片段生成“计算的”CSS

Question

我正在着手一个项目，以便能够获取任意 HTML sn-p（例如，<div></div> 块中的所有代码）并生成在空白页面上呈现 sn-p 所需的最少 CSS，同时保持它在原始网页上具有相同的视觉样式。我的感觉是，这个功能的所有繁重工作都可以在来自开源项目的各种库和/或代码中找到，我希望最大限度地利用这项工作。我的第一个冲动是获取 Firebug 的源代码，看看如何利用与“计算”选项卡相关的代码。向 StackOverflow 社区寻求有关此开发的其他地方和/或方法的见解。很高兴考虑 C、C++、Python、Perl、PHP 或 Javascript 中的任何资源。谢谢！

（更新：2010 年 3 月 4 日上午 8 点）

从下面的 Sinan 代码 sn-p 中，我看到有一种标准方法可以计算 INDIVIDUAL 元素的 CSS。然而，完整的问题是计算整个 sn-p 的 CSS - 即有效地计算一个最小的样式表，该样式表正确地适应整个 DOM 子树（选定的根元素和所有子元素）的样式。该算法的开始可能是遍历子树并聚合所有单个元素的 CSS，但这将有效地忽略 CSS 级联规则。想法？

Answer 1

Quirksmode 可能会对您有所帮助，

http://www.quirksmode.org/dom/getstyles.html

思南。

---

编辑：

这对我来说很有趣，我做了一个基本的尝试（有一些jquery 帮助）。

更重要的是它工作并提供计算样式:)

所以这里是一个获取body元素计算样式的sn-p：

JS：

$.each(window.getComputedStyle(document.getElementsByTagName('body')[0],''),
    function(k,v){
        console.log(v + ' : ' +$('body').css(v));
});

输出：

...
font-weight : 400
height : 608px
left : 0px
letter-spacing : normal
line-height : 13.8333px
...