我正在开始一个元素的工作,该元素能够获取任意 HTML 片段(例如 <div></div>
block 中的所有代码)并生成在空白页面上呈现片段所需的最少 CSS,同时保持相同的视觉样式它在原始网页上。我的感觉是,这个功能的所有繁重工作都可以在各种库和/或开源元素的代码中找到,我想最大程度地利用这项工作。我的第一个冲动是获取 Firebug 的源代码,看看如何利用与“计算”选项卡相关的代码。向 StackOverflow 社区寻求有关其他地方的见解和/或此开发的方法。很高兴考虑使用 C、C++、Python、Perl、PHP 或 Javascript 的任何资源。谢谢!
(更新:2010 年 3 月 4 日上午 8 点)
从下面 Sinan 的代码片段中,我看到有一种标准方法可以计算单个元素的 CSS。然而,完整的问题是计算整个片段的 CSS——即有效地计算一个最小的样式表,该样式表正确地适应整个 DOM 子树(选定的根元素和所有子元素)的样式。该算法的开始可能是遍历子树并聚合所有单个元素的 CSS,但这实际上会忽略 CSS 级联规则。想法?
最佳答案
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
...
关于javascript - 如何为任意 HTML 代码片段生成 "computed"CSS,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/2375675/