JavaScript获取元素宽高与位置属性详解

JavaScript获取元素宽高与位置属性详解

在项目开发中，经常需要通过JavaScript获取元素的具体位置以实现精准定位。为了清晰理解相关概念，首先通过图示说明scrollWidth、clientWidth与offsetWidth三者之间的几何关系。

以下是关于JavaScript获取各类宽度与高度属性的简要介绍。

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：计算相对于文档的水平坐标加上垂直方向滚动量的总和。

浏览器兼容性差异对比

上述标准主要适用于IE浏览器，Firefox存在以下差异：

在IE6.0及FF1.06+版本中：

clientWidth 等于 width 加上 padding。clientHeight 等于 height 加上 padding。offsetWidth 等于 width 加上 padding 再加上 border。offsetHeight 等于 height 加上 padding 再加上 border。

在IE5.0/5.5版本中：

clientWidth 等于 width 减去 border。clientHeight 等于 height 减去 border。offsetWidth 等于 width。offsetHeight 等于 height。

需要注意的是，CSS中的margin属性与clientWidth、offsetWidth、clientHeight及offsetHeight均无关联。

DOM元素尺寸属性说明

关于offsetWidth（即width+padding+border）的进一步说明。

假设obj代表某个HTML控件。

obj.offsetTop表示obj距离上方或上层控件的位置，返回整型数值，单位为像素。

obj.offsetLeft表示obj距离左方或上层控件的位置，返回整型数值，单位为像素。

obj.offsetWidth表示obj控件自身的宽度，返回整型数值，单位为像素。该属性获取的是对象可见内容的宽度，不包含滚动条和边框。

obj.offsetHeight表示obj控件自身的高度，返回整型数值，单位为像素。

offsetWidth与style.width的区别

offsetWidth与style.width的区别分析。

第一，offsetTop返回的是数字类型，而style.top返回的是字符串类型，其中包含数字及单位px。

第二，offsetTop是只读属性，而style.top既可读也可写。

第三，如果HTML元素未显式指定top样式，style.top将返回空字符串。