原生js—offsetWidth、screenWidth、clientWidth、innerWidth、outerWidth……各种宽高的理解原生js

**
原生js—offsetWidth、screenWidth、clientWidth、innerWidth、outerWidth……各种宽高的理解 **
1.首先对 window对象、 document对象做一个区别;

window ：窗口（整个浏览器窗口），包含document;
document ：整个HTML文档；

2.与 window 相关的宽、高：

window.innerWidth：整个浏览器窗口的宽度；
window.innerHeight：document起始（只是起始）到浏览器窗口底部的高度；
window.outerWidth：整个浏览器窗口的宽度；
window.outerHeight：整个浏览器窗口的高度；

3.与 window.screen 相关的宽、高：

window.screen.height：用户屏幕的高度；
window.screen.width：用户屏幕的宽度；
window.screen.availHeight：可利用的屏幕高度，与window.screen.height一样;
window.screen.availWidth：可利用的屏幕宽度，与window.screen.width一样；
window.screenTop：浏览器窗口到用户屏幕最上方的距离；
window.screenLeft：浏览器窗口到用户屏幕最左边的距离；

4.与 client、offset、scroll 相关的宽、高：

与 client相关的宽高（以body为例）
document.body.clientHeight：可视部分的高度，即padding + content；
document.body.clientWidth：可视部分的宽度，即padding + content；
注意：其他元素也有 clientWidth 和 clientHeight，不仅仅是body；
无padding、无滚动条时：
clientWidth == style.width；
有padding、无滚动条时：
clientWidth == style.width + style.padding；
有padding、有滚动时：
clientWidth == style.width + style.padding - 滚动条的宽度；
clientHeight类似
document.body.clientLeft：元素的 border-left 的大小，无border时，clientLeft === 0;
document.body.clientTop：元素的 border-top 的大小，无border时，clientLeft === 0;
与offset 相关的宽高（以body为例）
document.body.offsetHeight：元素的 border + padding + content 的值（跟元素溢出无关）；
document.body.offsetWidth：元素的 border + padding + content 的值（跟元素溢出无关）；
注意：任何元素都有 offsetWidth 和 offsetHeight，不仅仅是body；
【原生js—offsetWidth、screenWidth、clientWidth、innerWidth、outerWidth……各种宽高的理解】无padding、无滚动条、无border时：
offsetWidth == style.width == clientWidth；
有padding、无滚动条、有border时：
offsetWidth == style.width + style.padding + style.border；
有padding、有滚动、有border时：
offsetWidth == style.width + style.padding + （style.border - 滚动轴的宽度）；
offsetHeight类似
而offsetTop、offsetLeft就必须注意浏览器的兼容性问题啦.
IE6、IE7（不过这些浏览器版本都比较老，早晚会被淘汰）
offsetLeft == ( offsetParent 的 padding-left) + ( 当前元素的 margin-left )
offsetTop == ( offsetParent 的 padding-top) + ( 当前元素的 margin-top)
IE8/9/10、chrome浏览器
offsetLeft == ( offsetParent 的 padding-left ) + ( offsetParent 的 border-left ) + ( offsetParent 的 margin-left ) + ( 当前元素的 margin-left )
offsetTop == ( offsetParent 的 padding-top ) + ( offsetParent 的 border-top ) + ( offsetParent 的 margin-top ) + ( 当前元素的 margin-top)
fireFox浏览器（不需要 border ）
offsetLeft == ( offsetParent 的 padding-left ) + ( offsetParent 的 margin-left ) + ( 当前元素的 margin-left )
offsetTop == ( offsetParent 的 padding-top ) + ( offsetParent 的 margin-top ) + ( 当前元素的 margin-top)
与scroll相关的宽、高（用的比较多）
scrollHeight：滚动大小，指的是包含滚动内容的元素大小（元素内容的总高度）；
scrollWidth：一般就是浏览器窗口的宽度；
scrollTop( 属性可读写 )：当元素中的内容溢出的时候，该元素被卷起来的宽度；
scrollLeft( 属性可读写 )：当元素中的内容溢出的时候，该元素被卷起来的高度；
在div中的 scrollWidth 和 scrollHeight
无滚动轴时：
scrollWidth == clientWidth == style.width + padding；
有滚动轴时：
scrollWidth == 实际内容的宽度 + padding；
scrollHeight == 实际内容的高度+ padding；