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

Question

我正在开始一个项目的工作，以便能够获取任意HTML片段（例如<div></div>块中的所有代码）并生成在空白页面上呈现片段所需的最小CSS，同时保持相同它在原始网页上具有视觉样式。我的感觉是，这个功能的所有繁重工作都可以在开源项目的各种库和/或代码中找到，我想尽可能地利用这项工作。我的第一个冲动是获取Firebug的源代码，看看如何利用与“Computed”选项卡相关的代码。希望StackOverflow社区能够深入了解其他地方的外观和/或方法。很高兴考虑C，C ++，Python，Perl，PHP或Javascript中的任何资源。谢谢！

（更新时间：上午8点3/4/10）

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

Answer 1

Quirksmode可能会帮到你，

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

思南。

---

编辑：

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

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

所以这是获取body元素的计算样式的片段：

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
...