image.png
1. (window).width()与(window).height()
$(window).width()与$(window).height()：获得的是屏幕可视区域的宽高，不包括滚动条与工具条。
$(window).width() = width + padding
$(window).height() = height + padding
2.document.documentElement.clientWidth//clientHeight
document.documentElement.clientWidth与document.documentElement.clientHeight：获得的是屏幕可视区域的宽高，不包括滚动条与工具条，跟jquery的(window).width()与(window).height()获得的结果是一样的。
document.documentElement.clientWidth = width + padding
document.documentElement.clientHeight = height + padding
3.document.body.clientWidth与document.body.clientHeight
获得的是body内容的宽高(不带border),如果内容只有200px，那么这个高度也是200px,如果想通过它得到屏幕可视区域的宽高，需要样式设置，如下：
body {
height: 100%;
overflow: hidden;
}
body, div, p, ul {
margin: 0;
padding: 0;
}
body的height:100%影响document.body.clientHeight的值。
body的margin:0,padding:0影响document.body.clientWidth的值。
注意
网页的模式document.compatMode在为标准兼容模式CSS1Compat时，支持document.documentElement.,不是标准兼容模式BackCompat时支持document.body.
4.window.innerWidth与window.innerHeight
window.innerWidth与window.innerHeight：获得的是可视区域的宽高，但是window.innerWidth宽度包含了纵向滚动条的宽度，window.innerHeight高度包含了横向滚动条的高度(IE8以及低版本IE浏览器不支持)。
window.innerWidth = width + padding + border + 纵向滚动条宽度
window.innerHeight = height + padding + border + 横向滚动条高度
5.window.outerWidth与window.outerHeight
window.outerWidth与window.outerHeight：获得的是加上工具条与滚动条窗口的宽度与高度。
window.outerWidth = width + padding + border + 纵向滚动条宽度
window.outerHeight = height + padding + border + 横向滚动条高度 + 工具条高度
6.scrollWidth & scrollHeight
这两个属性是元素的内容区域加上内边距，在加上任何溢出内容的尺寸.
因此，如果没有溢出时，这些属性与clientWidth和clientHeight是相等的。
7.offsetWidth和offsetHeight
document.body.offsetWidth 网页可见区域宽（包括边线）
offsetWidth = width+padding+border 当前对象的宽度
style.width也是当前对象的宽度(width+padding+border)
两种区别：
1.style.width返回值是数字+单位(px),而offsetWidth只有数值（四舍五入后的整数）。
2.如果对象的宽度设置为百分比，则无论页面变大还是变小,style.width都返回百分比，而offsetWidth返回的是宽度数值
3.如果没有在HTML元素中指定width，则style.width返回的是空字符串，而offsetWidth都能获取到
4.offsetWidth是只读属性，style.width是可读可写属性
offsetHeight 获取当前对象的高度，和style.height区别同上
offsetLeft 获取的是相对于父对象的左边距（不包括元素的边框和父容器的边框），和style.left区别同上
offsetTop 获取的是相对于父对象的上边距 (不包括元素的边框和父容器的边框) ，和style.top区别同上
scrollLeft和scrollTop
document.body.scrollTop：网页被卷去的头部
元素的scrollTop：只能用于元素设置了overflow的css样式中，内容被卷去的高度
clientTop和clientLeft
返回元素的内边距的外边缘和他的边框外边缘之间的水平距离和垂直距离，通常这些值就等于左边和上面的边框(border)宽度。
兼容性
1.window innerWidth 和 innerHeight 属性与outerWidth和outerHeight属性IE8以及以下浏览器不支持。
2.测试浏览器IE，火狐，谷歌，360浏览器，Safari都支持document.documentElement.clientWidth与document.documentElement.clientHeight。
3.浏览器标准兼容模式打开时支持document.documentElement.clientWidth与document.documentElement.clientHeight。标准兼容模式关闭时支持document.body.clientWidth和document.body.clientHeight
4.client、scroll、offset家族都受标准兼容模式影响（即第三条）
clientX,offsetX,screenX,pageX
找了篇文章讲的很详细
区分event对象中的[clientX,offsetX,screenX,pageX]
https://www.jianshu.com/p/a52077e8369d
网友评论