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