之前项目刚写了个推断触底自动加载更多的功用，发明本身对种种宽、高的定义照样很隐约。终究没有偷懒，写了个demo理解了一下。网上也有许多整理好的文章，为了增强下本身影象，趁便或许能给些发起。

element的一些宽、高属性

注：盒子模子： content+padding+margin+border

element.clientWidth =content + 摆布padding
element.clientHeight = content + 高低padding
// 元素的内容部份 + 对应的padding（摆布/高低）；当外层元素有转动条时，该值是不包括转动条的宽度的
// block元素 不设置width的话，默许继续外层元素的宽度 => 因而目的元素的宽 = 外层元素是不是有转动条？(外层元素宽 - 转动条宽度 - element的摆布border - element的摆布margin):(外层元素宽 - element的摆布border - element的摆布margin）；假如不设置height，而且padding也为0的话；纵然外层元素高度值再大，目的元素的clientHeight仍为0

element.clientLeft = 左border
element.clientTop = 上border
// 元素的边框宽度

element.scrollWidth = content + 摆布padding
element.scrollHeight = content + 高低padding
// 与元素的clientWidth雷同

element.scrollLeft = 超越阅读器部份的最左边到阅读器最左边的间隔（即为文档卷出阅读器的部份长度）
element.scrollTop = 超越阅读器部份的最上侧到阅读器最上侧的间隔（即为文档卷出阅读器的部份高度）

element.scrollWidth = content + 摆布padding
element.scrollHeight = content + 高低padding
// 与元素的clientWidth雷同

element.offsetWidth = content + 摆布padding + 摆布border
element.offsetTop = content + 高低padding + 高低border

element.offsetLeft = element最左边间隔（从border外最先）外层元素的间隔
element.offsetTop = element最上侧间隔（从border外最先）外层元素的间隔
// 这个值是牢固的，不会跟着转动发生变化

注：ie/chrome/firefox猎取body的scrollTop和scrollLeft时，直接用document.body.scrollTop取到的值都是0；要改成document.documentElement.scrollTop；或许运用window.pageXOffset,这个属性兼容性会高一些，ie8以上以及firefox、chrome都支撑

window的一些宽、高属性

window.innerWidth = 阅读器可视地区的宽度（包括转动条宽度）
window.outerWidth = 阅读器可视地区的宽度（包括转动条宽度）
// 在chrome/firefox上测试 window的innerWidth和outerWidth是一样的
// **ie测试效果有点疑问，还要排查下再来补充**

window.screenLeft = 阅读窗口间隔屏幕可视地区最左边的间隔
window.screenTop = 阅读窗口（包括顶部地址栏、工具栏）间隔屏幕可视地区最上侧的间隔
// chrome测试效果，在主屏幕上的效果：screenLeft:0;screenTop:0;
//然则在外接显示屏中的阅读器翻开就有题目；外接显示屏的距最左边间隔不是从0最先而是从主屏幕的可见地区宽度最先的，因而此时screenLeft的值为主屏幕的宽度；screenTop也一样存在差值；外接显示屏应当也是以主屏幕的边境为参考
// firefox不支撑这两个属性
// 在ie中;screenTop的最小值不是0，而是顶部地址栏和工具栏的高度。

window.screenX = 阅读窗口间隔屏幕可视地区最左边的间隔
window.screenY = 阅读窗口（包括顶部地址栏、工具栏）间隔屏幕可视地区最上侧的间隔
// chrome测试效果： 与screenLeft/screenTop测试效果一致
// firefox测试效果： 与chrome的screenLeft/screenTop效果一样
// ie测试效果都为：-8？？有点新鲜

window.pageXOffset = 超越阅读器部份的最左边到阅读器最左边的间隔（即为文档卷出阅读器的部份长度）
window.pageYOffset = 超越阅读器部份的最上侧到阅读器最上侧的间隔（即为文档卷出阅读器的部份高度）
// 在chrome/firefox/ie 上测试；效果都相称，且等价于scrollTop/scrollLeft的值；兼容性要好过scrollTop/scrollLeft

screen的宽/高

screen.width = 屏幕的宽度（分辨率宽）
screen.height= 屏幕的高度（分辨率高）
// 在chrome/firefox/ie 上测试；效果都相称，屏幕的分辨率，与阅读器窗口大小无关

screen.availWidth = 屏幕的宽度（分辨率宽）
screen.availHeight= 屏幕的高度（分辨率高）
// firefox/chrome/ie availHeight 与电脑窗口的顶部导航栏和底部导航栏的高度有关（注意不是阅读器内部的导航栏）
// availWidth 与电脑窗口的左边导航/工具栏和右导航/工具栏的高度有关（注意不是阅读器内部的导航栏）

点击事宜的event对象里的一些宽、高

e.clientX = 当前鼠标间隔阅读器最左边的间隔
e.clientY = 当前鼠标间隔阅读器最上侧的间隔（不包括工具栏、地址栏）
// 原点:(0,0)
// chrome/firefox/ie  效果一致，主屏与外接屏效果也一致

e.screenX = 当前鼠标间隔阅读器最左边的间隔 
e.screenY = 当前鼠标间隔阅读器最上侧的间隔（包括工具栏、地址栏）
// 原点:(0,阅读器的工具栏+地址栏的高度+屏幕顶部导航/工具栏的高度（假如有的话）)
// chrome/firefox/ie 在主屏上都 = clientX；在外接显示屏中，受主屏幕影响存在误差

e.offsetX = 当前鼠标间隔当前元素最左边的间隔
e.offsetY = 当前鼠标间隔当前元素最上侧侧的间隔
// chrome/firefox/ie 效果一致，主屏与外接屏效果也一致

e.pageX = 当前鼠标间隔阅读器最左边的间隔
e.pageY = 当前鼠标间隔阅读器最上侧的间隔（不包括工具栏、地址栏）

e.x = 当前鼠标间隔阅读器最左边的间隔
e.y = 当前鼠标间隔阅读器最上侧的间隔（不包括工具栏、地址栏）

一般而言（无外接屏幕） e.clientX = e.screenX = e.x = e.pageX；e.clientY = e.screenY = e.Y = e.pageY

写在末了的话

心累啊，种种阅读器对一些属性的支撑还不一样，效果也不一样；之前框架用得太多，公司这边对兼容性要求也没有很大，所以写法少很少有注意兼容性题目；虽然个中的大部份属性或许一时半会儿用不到，然则捋清晰照样好的，ie的一些测试，等用同事电脑测过再转头改改。嗯，就这样；过程当中照样有很大收成的！