如何在网页上获得可见DOM元素的可视大小

Question

我正在尝试编写一种算法，该算法尝试根据页面的空间组织将网页分割为其页面，页眉，主要内容区域等组件。

我打算做的是：

1. 首先使用网络浏览器（比如Firefox）渲染页面。
2. 然后检查浏览器生成的DOM模型

3. 从DOM模型中我想得到以下内容：

   一个。元素的大小（高度，宽度）（我喜欢实际大小 - 不仅仅是样式中的内容）

   湾在网页上放置元素

   ℃。元素的Z指数。

出于这个问题的目的 - 我很感激帮助：3.a和3.b

感谢。

Answer 1

offsetWidth\offsetHeight是获取元素维度所需的内容：

https://developer.mozilla.org/en/DOM/element.offsetWidth

offsetTop\offsetRight很可能是您要查找对象的位置：

http://www.quirksmode.org/js/findpos.html

Answer 2

这取决于浏览器。此表显示了跨浏览器的方法：

http://www.csscripting.com/css-multi-column/dom-width-height.php

但如果你只是使用Firefox而不是使用Firefox处理代码/ Javascript。您还可以查看Firebug的源代码，看看它如何计算width / height / z-index。

Answer 3

我认为你想要的是：offsetWidth，offsetHeight，offsetTop和offsetLeft。