JavaScript DOM 9 - 元素的尺寸与位置

1: 获得页面上某个元素在视口坐标系的位置和元素的尺寸:

element.getBoundingClientRect():

{    
    left:8
    top:104
    right:1432
    bottom: 158
    width:1424
    height:54   
}

以上方法返回一个对象,包含六个元素,分别是此元素左上角和右下角的坐标,以及元素的宽和高。但是在原始的IE中并不返回width和height, 不过可以自己通过坐标计算出来。
值得注意的是getBoundingClientRect()不是实时的,在调用此函数后,用户再滚动或者改变浏览器窗口大小,它返回的值并不会更新。

针对所有的文档元素,它们都定义了三组变量跟尺寸和位置有关:

1: 包含border的尺寸

offsetWidth//返回包含border在内的宽度
offsetHeight//返回包含border在内的高度
offsetTop//元素与其offsetParent之间的垂直距离
offsetLeft//元素与其offsetParent之间的水平距离
offsetParent//

2: 不包含border的尺寸

clientWidth//返回不包含border在内的宽度
clientHeight//返回不包含border在内的高度
clientLeft//
clientTop//

3: 元素的滚动条

scrollWidth//对于可滚动的元素(overflow:scroll)的元素,返回元素内容的宽度
scrollHeight//对于可滚动的元素(overflow:scroll)的元素,返回元素内容的高度
scrollLeft//对于可滚动的元素(overflow:scroll)的元素,返回/设置元素的滚动条向右边滚动的px
scrollTop//overflow:scroll)的元素,返回/设置元素的滚动条向下边滚动的px

相关推荐