JavaScript的各种宽高简介

一、DOM对象

1、只读属性

（1）clientWidth、clientHeight： padding + content ( - scroll宽度 )

（2）offsetWidth、offsetHeight：padding + content + border

（3）clientTop、clientLeft：border的top、border的left

（4）offsetTop、offsetLeft：相对于其offsetParent上边距离、左边距离
概念：offsetParent是指一直往上找，第一个具有定位的父级元素

（5）scrollWidth、scrollHeight：padding + content + 不在可视区域的部分

2、可读可写属性

（1）scrollTop、scrollLeft：已经被卷上去或移到左边 看不到的部分，返回的是数字

（2）dom.style.xxx：注意：该值只能得到设置的内联样式的值，返回的是字符串，实际计算后展示的值需要通过window.getComputedStyle($0)（非IE）或 dom.currentstyle 获得

页可见区域宽： document.body.clientWidth;
网页可见区域高： document.body.clientHeight;
网页可见区域宽： document.body.offsetWidth (包括边线的宽);
网页可见区域高： document.body.offsetHeight (包括边线的宽);
网页正文全文宽： document.body.scrollWidth;
网页正文全文高： document.body.scrollHeight;
网页被卷去的高： document.body.scrollTop;
网页被卷去的左： document.body.scrollLeft;
网页正文部分上： window.screenTop;
网页正文部分左： window.screenLeft;
屏幕分辨率的高： window.screen.height;
屏幕分辨率的宽： window.screen.width;
屏幕可用工作区高度： window.screen.availHeight;

二、Event事件

以下属性的获取：event.xx

（1）clientX、clientY：事件发生时，鼠标距离浏览器左上角(0,0)的距离

（2）screenX、screenY：事件发生时，鼠标距离屏幕左上角的距离

（3）offsetX、offsetY：事件发生时，鼠标距离该dom左上角的距离

（4）pageX、pageY：事件发生时，鼠标距离页面左上角的距离。若未出现滚动条，则与clientX、clientY相等

参考：https://segmentfault.com/a/1190000002545307

部分资料来自网络，如有侵权，联系删除。转载请注明出处！