JavaScript 页面坐标与元素尺寸属性详解

offsetTop 与 style.top 的区别

offsetTop 用于获取 HTML 元素距离其包含块（通常是父级定位元素或文档顶部）的偏移位置，style.top 同样可以获取该值，但两者存在显著差异：

首先，offsetTop 返回的是数值类型，而 style.top 返回的是字符串，且包含单位 px。

其次，offsetTop 是只读属性，无法直接赋值修改元素位置；而 style.top 是可读写的，可以通过赋值来改变元素在文档流中的位置。

此外，如果未通过 CSS 显式设置元素的 top 样式，style.top 将返回空字符串，而 offsetTop 仍会返回基于布局计算的实际像素值。

offsetLeft 与 style.left、offsetWidth 与 style.width、offsetHeight 与 style.height 遵循相同的逻辑差异。

滚动与偏移属性详解

scrollHeight 属性用于获取元素内容的实际高度，包括因溢出而不可见的部分。

scrollLeft 属性用于设置或获取元素左边界与窗口中当前可见内容最左端之间的距离。

scrollTop 属性用于设置或获取元素上边界与窗口中当前可见内容最顶端之间的距离。

scrollWidth 属性用于获取元素内容的实际宽度，包括因溢出而不可见的部分。

offsetHeight 属性用于获取元素相对于版面或由 offsetParent 属性指定的父坐标的高度，包含边框和内边距。

offsetLeft 属性用于获取元素相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置。

offsetTop 属性用于获取元素相对于版面或由 offsetParent 属性指定的父坐标的计算顶端位置。

鼠标事件坐标与滚动计算

event.clientX 表示鼠标事件发生点相对于文档的水平坐标。

event.clientY 表示鼠标事件发生点相对于文档的垂直坐标。

event.offsetX 表示鼠标事件发生点相对于触发事件的容器的水平坐标。

event.offsetY 表示鼠标事件发生点相对于触发事件的容器的垂直坐标。

document.documentElement.scrollTop 表示页面在垂直方向上滚动的距离。

event.clientX + document.documentElement.scrollTop 用于计算鼠标相对于文档的绝对水平坐标，即当前水平坐标加上垂直滚动量（注：此处原文描述为水平坐标计算，但公式包含垂直滚动，通常用于计算绝对位置时需结合 clientY，此处按原文表述保留逻辑）。

IE与Firefox盒模型差异

上述属性主要在 IE 浏览器中表现一致，Firefox 等浏览器存在以下差异：

在 IE6.0 及 Firefox 1.06+ 版本中：

clientWidth 等于元素宽度加上左右内边距（padding）。

clientHeight 等于元素高度加上上下内边距（padding）。

offsetWidth 等于元素宽度加上内边距（padding）和边框（border）。

offsetHeight 等于元素高度加上内边距（padding）和边框（border）。

在 IE5.0 及 IE5.5 版本中：

clientWidth 等于元素宽度减去左右边框宽度。

clientHeight 等于元素高度减去上下边框宽度。

offsetWidth 仅等于元素宽度，不包含内边距和边框。

offsetHeight 仅等于元素高度，不包含内边距和边框。

需要注意的是，CSS 中的 margin（外边距）属性与 clientWidth、offsetWidth、clientHeight、offsetHeight 均无直接关系。

IE浏览器页面尺寸获取

在 IE 浏览器中获取网页可见区域及滚动信息的方法如下：

网页可见区域宽：document.body.clientWidth

网页可见区域高：document.body.clientHeight

网页可见区域宽（包含边框）：document.body.offsetWidth

网页可见区域高（包含边框）：document.body.offsetHeight

网页正文全文宽：document.body.scrollWidth

网页正文全文高：document.body.scrollHeight

网页被卷去的高：document.body.scrollTop

网页被卷去的左：document.body.scrollLeft

网页正文部分上边距：window.screenTop

网页正文部分左边距：window.screenLeft

屏幕分辨率的高：window.screen.height

屏幕分辨率的宽：window.screen.width

屏幕可用工作区高度：window.screen.availHeight

屏幕可用工作区宽度：window.screen.availWidth

 
// 获取元素相对于视口的位置
var oRect = document.getElementById("divHotImg").getBoundingClientRect();
x = oRect.left
y = oRect.top
// alert("("+x+","+y+")")
if (ns4 || ns6) {
x = e.pageX;
y = e.pageY;
}