screen:
1 screen.width //屏幕的宽度 2 screen.availWidth //屏幕可用宽度(除去任务栏等)
clientTop:获取 offsetTop 属性和客户区域的实际顶端之间的距离(实际就是元素对应的border属性的宽度), 不知道为啥在firefox下对body求clientTop为0.
clientWidth: the width of the object including padding, but not including margin, border, or scroll bar.
offsetTop:自身border外边缘相对于父元素或者浏览器边框的距离(相当于style.top+自身margin).
offsetHeight: 自身的高度(相当于自身的border + padding + style.height).
offsetParent: 获取定义对象 offsetTop 和 offsetLeft 属性的容器对象的引用(可以用来循环求得距离body的距离).
求元素离body的偏移
1 var offset=function(ele){ 2 var o={top:0,left:0}; 3 o.top = ele.offsetTop; 4 o.left = ele.offsetLeft; 5 var curr = ele.offsetParent; 6 while( curr !==document.body){ 7 o.top = o.top + curr.offsetTop + curr.clientTop; 8 o.left = o.left + curr.offsetLeft + curr.clientLeft; 9 curr = curr.offsetParent 10 } 11 12 return o; 13 }
scrollHeight:可滚动区域高度.
scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离(最大的scrollTop为scrollHeight-clientHeight).
网上找的这幅图
测试是发现style.top的距离应该是指'父元素的border内边缘到元素margin的距离'.
getBoundingClientRect(): 元素所占区域矩形(border围成的区域)离浏览器边框的距离.
jQuery中的一些实现
offset(),相对于body的偏移, 摘出来的一部分
box = elem.getBoundingClientRect();
top: box.top + ( win.pageYOffset || docElem.scrollTop ) - ( docElem.clientTop || 0 ),
left: box.left + ( win.pageXOffset || docElem.scrollLeft ) - ( docElem.clientLeft || 0 )