html - 提取DOM元素的渲染信息

Question

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

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

谢谢

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

Answer 1

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

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

Answer 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