javascript - 如何为任意 HTML 代码片段生成 "computed"CSS

Question

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

(更新:2010 年 3 月 4 日上午 8 点)

从下面 Sinan 的代码片段中，我看到有一种标准方法可以计算单个元素的 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
...