我如何得到一个网页上可见的DOM元素的视觉大小

How do I get the visual size of visible DOM elements on a web page

本文关键字:DOM 元素 视觉 网页 何得 一个      更新时间:2023-09-26

我正在尝试编写一个算法,试图将网页分割成其组件,如页脚,页眉,基于页面的空间组织的主要内容区域。

我打算做的是:

  1. 首先使用web浏览器(例如Firefox)渲染页面。
  2. 然后检查浏览器生成的DOM模型
  3. 从DOM模型我想得到以下内容:

    。元素的大小(高度,宽度)(我想要实际的大小-而不仅仅是样式中说的)

    b。元素在网页上的位置

    c。元素的Z-index

对于这个问题的目的——我很感激帮助:A和3.b

谢谢。

offsetWidth'offsetHeight是获取元素尺寸所需的参数:

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

offsetTop'offsetRight很可能是您想要查找的对象位置:

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

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

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

但是如果你只是使用Firefox,那么你使用Firefox处理代码/Javascript。您还可以查看Firebug的源代码,看看它是如何计算宽度/高度/z-index的。

我认为你想要的是:offsetWidth, offsetHeight, offsetTop,和offsetLeft。