三大家族的作用和区别

1.offset

　　1.1offsetwidth：自身的内容宽度，内容+border+padding

　　1.2offsettop：距离最近定位盒子的头部距离

　　1.3offsetparent：距离最近定位的父盒子

 

2.scroll

　　2.1scrolltop：页面被滚动的高

　　2.2scrollleft：页面被滚动的左边　　

　　2.3scrollwidth：页面全文的宽

　　2.4scrollheight：页面全文的高

获取方式：document.body.scrollXX     document.documentElement.scrollXX 

现在主流获取方式：window.pageXoffset==>scrollleft    window.pageYoffset==>scrolltop

 

3.client

　　3.1clientwidth：自身内容的宽度，内容+padding（没有border）

　　3.2clientleft：返回元素的边框距离

 

区别

　　1.offsetwidth：自身的内容+border+padding

　　2.clientwidth：自身的内容+padding

　　3.scrollwidth：页面全文内容宽（包括滚动）

　　4.offsettop：距离第一个定位父元素的高

　　5.clienttop：返回边框的高

　　6.scrolltop：滚动的高

 

4.event事件

　　1.1.event.clientX：光标相对于网页水平位置

　　1.2.event.clientY：光标相对于网页垂直位置

　　注意：只想对于当前可视窗口大小，取一屏的大小

　　2.1.screeX：光标相对于当前屏幕的水平位置

　　2.2.screeY：光标相当于当前屏幕的垂直位置

　　注意：包括头部，取得是电脑界面大小

　　3.1.pageX：光标相对于文档的水平位置

　　3.2.pageY：光标相对于文档的垂直位置

　　注意：全部内容，可往下滚动距离

　　

　　可视窗口大小通用方法：window.innerwidth

转载于:https://www.cnblogs.com/ccc0114/p/9916701.html