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