HTML代码：

<div style="width: 100px;height: 50px;float: left;background-color: #f5f5f5;">阻碍</div>
<div id="Test">测试
</div>
复制代码

CSS代码：这里css代码没有使用border-box模式，使用的是默认的content-box

* {margin: 0;padding: 0;
}
#Test {border: 10px solid red;padding: 20px;margin: 30px;width: 100px;height: 60px;float: left;overflow: auto;
}
复制代码

js代码：获取DOM元素

let myDom = document.getElementById('Test')
复制代码

图片展示：

演示结果：

一、offsetWidth

// js
let W = myDom.offsetWidth
console.log(W) => // 160W = (border + padding) * 2 + width
复制代码

结论 offsetWidth获取盒子的宽度是包括盒子的边框，内边距和内容宽度等在内相加的结果，是整个盒子的真实宽度，不包括左右外边距

二、offsetHeight

// js
let H = myDom.offsetHeight
console.log(H) => // 120H = (border + padding) * 2 + height
复制代码

结论 offsetHeight获取盒子的高度是包括盒子的边框，内边距和内容高度等在内相加的结果，是整个盒子的真实高度，不包括上下外边距

三、offsetLeft

// js
let OL = myDom.offsetLeft
console.log(IL) => // 130IL = margin-left + 阻碍盒子的宽度
复制代码

结论 offsetLeft是获取盒子当前位置距离自己最近定位的父元素左侧的距离，如果没有最近的定位的父元素，则相当于HTML

四、offsetTop

这一步去掉了阻碍盒子和自身盒子的float: left;属性

let OT = myDom.offsetTop
console.log(IT) => // 80IT = margin-top + 阻碍盒子的高度
复制代码

结论 offsetTop是获取盒子当前位置距离自己最近定位的父元素顶部的距离，如果没有最近的定位的父元素，则相当于HTML

五、clientWidth

let CW = myDom.clientWidth
console.log(CW) => // 140CW = width + padding * 2
复制代码

结论 clientWidth是获取盒子的可视区域宽度，包括padding在内，不包括border，这里是不包括滚动条的情况，如果有滚动条，发现盒子的宽度(width)从100变成83，可知滚动条的宽度为17px，而且是占据盒子内容的宽度，除了可视宽高，似乎其他都没有影响。 Tips 所谓的可视区域，个人理解就是一个盒子里面，能够展示出被人看见的内容区域，就是可视区域，最直接的表现就是一个盒子填充了背景色，这个能被人看见的背景色区域就是可视区域。如下图的绿色背景区域就是可视区域

除非盒子大小改变了，否则可视区域的宽高是不会变得，如下图粉色区域，无论怎么滑动滑块，可视区域永远都是这么大

六、clientHeight

let CW = myDom.clientHeight
console.log(CW) => // 100CW = height + padding * 2
复制代码

结论 clientHeight是获取盒子的可视区域高度，包括padding在内，不包括border，这里是不包括滚动条的情况，如果有滚动条，发现盒子的高度(height)从60变成43，可知滚动条的宽度为17px，而且是占据盒子内容的高度，除了可视宽高，似乎其他都没有影响。

七、clientLeft

let CL = myDom.clientLeft
console.log(CL) => // 10CL = padding-left
复制代码

结论 clientLeft是获取盒子的左边框的宽度，可理解为可视区域和左侧边(这个左侧边不是border)之间的距离

八、clientTop

let CT = myDom.clientTop
console.log(CT) => // 10CT = padding-top
复制代码

结论 clientLeft是获取盒子的上边框的宽度，可理解为可视区域和上侧边(这个上侧边不是border)之间的距离

九、scrollWidth

现在我们要修改一下HTML代码：

<div style="width: 100px;height: 50px;background-color: #f5f5f5;">阻碍</div><div id="Test"><p style="white-space: nowrap;">测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试</p><p style="white-space: nowrap;">测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试</p><p style="white-space: nowrap;">测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试</p><p style="white-space: nowrap;">测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试</p><p style="white-space: nowrap;">测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试</p><p style="white-space: nowrap;">测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试</p></div>
复制代码

let SW = myDom.scrollWidth
console.log(SW) => // 605SW = 盒子内容里面元素占据的真正宽度
复制代码

结论 滚动宽度就是盒子里面元素内容的真正的宽度，就是图中蓝色框两个三角箭头之间的距离加上可视区域宽度

十、scrollHeight

let SH = myDom.scrollHeight
console.log(SH) => // 166SH = 盒子内容里面元素占据的真正高度
复制代码

结论 滚动高度就是盒子里面元素内容的真正的高度，就是图中蓝色框两个三角箭头之间的距离加上可视区域高度

十一、scrollTop

这里不好测试，我们给HTML添加点击事件

<div id="Test" onclick="handleClick()"></div>
let ST = myDom.scrollTop
console.log(ST) => // 初始状态为0，现在我们滑动一下，然后点击，触发事件，再看一下值
handleClick = function () {let ST = myDom.scrollTopconsole.log(ST) => // 将滚动条滑动到底，我们发现ST的值为83，也可以理解为两个三角之间的高度
}
复制代码

结论 通过前面的计算我们知道，滚动条可滚动的高度为166px，而可视内容区域的大小为83px，即滚动条的最大滚动高度为滚动高度(scrollHeight) - 盒子可视高度(clientHeight)，不信的话可以自己测试，我这里删除了第六条数据，最后是scrollHeight为145，而ST为62，刚好是145-83=62

十二、scrollLeft

let SL = myDom.scrollLeft
console.log(SL) => // 初始值为0，现在我们滑动一下
handleClick = function (e) {let SL = myDom.scrollLeftconsole.log(SL) => // 将滚动条滑动到底，我们发现SL的值为482，也可以理解为两个三角之间的宽度
}
复制代码

结论 通过前面的计算我们得知，滚动条的可滚动的宽度为605px，而可视内容区域的宽度为123px，即滚动条的最大滚动宽度为滚动宽度(scrollWidth) - 盒子可视宽度(clientWidth)

十三、innerWidth

窗口宽度，也可以理解为window窗口的可视区域宽度，或者说一个页面能够展示内容的区域宽度

let IW = window.innerWidth
// 标准模式下
if (document.documentElement) {let IW = document.documentElement.clientWidth
// 怪异模式
} else {let IW = document.body.clientWidth
}
复制代码

十四、innerHeight

窗口高度，也可以理解为window窗口的可视区域高度，或者说一个页面能够展示内容的区域高度

let IH = window.innerHeight
// 标准模式下
if (document.documentElement) {let IH = document.documentElement.clientHeight
// 怪异模式
} else {let IH = document.body.clientHeight
}
复制代码

Event事件

一、clientX & clientY

鼠标点击或者触屏时，点击位置距离window可视区域左上角的(0, 0)的坐标距离，说白了就是点击的位置距离window可视区域左边的距离和距离window可视区域上边的距离，比如下图：

我们点击绿色区域坐标，来看看对应的值：由上面看出，clientX和clientY并不是距离灰色盒子可视区域左上角的坐标距离，而是距离window可视区域左上角的距离

二、offsetX & offsetY

鼠标点击或者触屏时，点击位置距离自身可视区域左上角的(0, 0)的坐标距离，说白了就是点击的位置距离边框红色边框以内的的粉色区域的左上角的上边和左边的距离，比如下图：

我们点击绿色区域坐标，来看看对应的值：

由上看出，offsetX和offsetY的值，在最下角的时候刚好的可视区域的宽高值，我们还可以看到layerX和layerY两个参数，那两个其实是相当于距离盒子左上角的上左距离，就是红色边框左上角开始

三、pageX & pageY

正常情况下，window的可视区域的是不变的，所以相对于可视区域的坐标也就不会变，无论怎么点，clientX和clientY都是一样的。 而正常情况下，pageX和pageY也是和clientX&clientY相等的，但是从page就可以知道，这个是页面坐标，也就是点击的页面距离window可视区域左上角的坐标距离，一般可视区域是固定的，但是页面大小就不一定是固定的，如果有滚动条，说面页面大小超过了可视区域，这时候点击滚动隐藏区域，pageX&pageY肯定是大于clientX&clientY

四、screenX & screenY

这个就好理解了，屏幕坐标，比如手机屏啊，电脑屏等，从左上角计算，点击的位置距离屏幕的左上角的上左距离