页面元素的一些距离

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 )

 

 

 

转载于:https://www.cnblogs.com/iori-zy/p/3234713.html