提取DOM元素的渲染信息答案

【问题标题】：extracting rendering information of DOM elements提取DOM元素的渲染信息
【发布时间】：2014-02-22 01:33:17
【问题描述】：

有没有办法提取DOM元素的渲染信息，比如位置、字体、颜色等？例如，一个 HTML 文件可能不指定标签的坐标，但 Web 浏览器引擎会以某种方式计算它们的位置和相对大小。我想知道如何让程序访问这些信息

我知道我可以手动访问渲染信息，例如，在 Google chrome 中使用“检查元素”，但我想知道是否有任何可编程方式。

谢谢

ps。我想我必须提供这个任务的上下文。我目前正在对 HTML 网页中的结构化数据（例如表格）进行信息提取，并且正在考虑使用视觉信息（例如表格元素的位置）来提取结构化信息。

【问题讨论】：

【解决方案1】：

JavaScript 可以使用someElement.getBoundingClientRect()，它返回一个包含left、top、width 和height 属性的对象。

还可以使用window.getComputedStyle(someElement)（旧版IE使用someElement.currentStyle）来获取各种计算出来的CSS信息。

【讨论】：

【解决方案2】：

当然，所有这些信息都可以使用 javascript 获得。你熟悉jQuery 库吗？您应该熟悉一个名为 .css() 的 jQuery 方法。使用 jQuery 选择器，您可以查询可以选择的任何 DOM 元素。因此，要找出页面上 h1 元素的颜色，您可以说

$('h1').css('color');

然后回来

"rgb(0, 0, 0)"

这里是一个不错的 jQuery 选择器概要（不是 w3 学校的忠实粉丝，但这足以让您初步了解一下：http://www.w3schools.com/jquery/jquery_ref_selectors.asp

【讨论】：