JS获得各种宽度和高度的简要介绍

有时，js用于获取元素的位置，以定位项目中的元素。首先，通过图片说明scrollwidth、clientwidth和offsetwidth之间的关系。

通过JS获得各种宽度和高度的简单介绍：

ScrollHeight:获取对象的滚动高度。ScrollLeft:设置或获取对象左边缘与窗口中当前可见内容最左端之间的距离scrollTop:设置或获取对象最顶端与窗口中可见内容最顶端之间的距离scrollWidth:获取对象的滚动宽度offsetHeight:获取对象相对于布局或的父坐标。由偏移父属性偏移指定的父坐标的高度：获取对象相对于布局的左计算位置或由偏移父属性偏移指定的父坐标：获取对象相对于布局的上计算位置或由偏移属性事件指定的父坐标。水平坐标事件的值。clientY相对于垂直坐标事件。offsetX相对于水平坐标事件。offset相对于垂直坐标文档。documentelement。容器的顶部。

主要是指IE，火狐的区别如下：

IE6.0、FF1.06:

clientWidth=宽度填充clientHeight=高度填充偏移宽度=宽度填充边框偏移高度=高度填充边框

IE5.0/5.5:

clientWidth=宽度-边框clientHeight=高度-边框偏移宽度=宽度偏移高度=高度

(需要提到的是，CSS中的margin属性与clientWidth、offsetWidth、clientHeight、offset heath无关。)

偏移宽度填充边框

假设obj是一个HTML控件。

Obj.offsetTop指的是Obj相对于上控件或上控件的位置，整数，单位像素。

Obj.offsetLeft指的是Obj从左边或上方控制的位置，整数，单位像素。

Obj.offsetWidth指的是Obj控件本身的宽度、整数和单位像素。获取对象可见内容的宽度，不包括滚动条和边框；

Obj.offsetHeight指的是Obj控件本身的高度，整数，单位像素。

偏移量和样式宽度之间的差异

1.offsetTop返回数字，而style.top返回字符串，除数字外还有单位px。

第二，offsetTop是只读的，而style.top可以读写。

第三，如果没有为HTML元素指定顶部样式，那么style.top将返回一个空字符串。