Created By JishuBao on 2019-04-01 12:38:22
Recently revised in 2019-04-01 15:38:22
欢迎大家来到技术宝的掘金世界,您的star是我写文章最大的动力！GitHub地址
开篇点题:
相信大家在平时工作中经常遇到一大堆的什么scrollTop、offsetTop经常看的晕晕的，在javascript中操作dom节点让其运动的时候，常常会涉及到各种宽高以及位置坐标等概念，如果不能很好地理解这些属性所代表的意义，就不能理解js的运动原理，同时，由于这些属性概念较多，加上浏览器之间本次我们就总结一下各种高度宽度,懂得基础方能写出更好的代码
感觉不错的小伙伴，点赞star走一波;
感觉文章有误的小伙伴，评论区、QQ群走一波；
虚心求教，不胜感激~
文章简介：
所有的测试都是ie盒子模型下，即width=content
1、DOM对象
2、Event对象
一、DOM对象
1.只读属性
所谓的只读属性指的是DOM节点的固有属性，该属性只能通过js去获取而不能通过js去设置，而且获取的值是只有数字并不带单位的（px,em等），如下：
- clientWidth和clientHeight
该属性指的是元素的可视部分宽度和高度，即padding+content，如果没有滚动条，即为元素设定的高度和宽度，如果出现滚动条，滚动条会遮盖元素的宽高，那么该属性就是其本来宽高减去滚动条的宽高(17px)。
- offsetWidth和offsetHeight
这一对属性指的是元素的border+padding+content的宽度和高度，该属性和其内部的内容是否超出元素大小无关，只和本来设定的border以及width和height有关。
- clientTop和clientLeft
这一对属性是用来读取元素的border的宽度和高度的。
- offsetLeft和offsetTop
说到这对属性就需要说下offsetParent,所谓offsetParent指的是当前元素的离自己最近的具有定位的（position:absolute或者position：relative）父级元素（不仅仅指的是直接父级元素，只要是它的父元素都可以），该父级元素就是当前元素的offsetParent，如果从该元素向上寻找，找不到这样一个父级元素，那么当前元素的offsetParent就是body元素。而offsetLeft和offsetTop指的是当前元素，相对于其offsetParent左边距离和上边距离。
- scrollHeight和scrollWidth
顾名思义，这两个属性指的是当元素内部的内容超出其宽度和高度的时候，元素内部内容的实际宽度和高度，需要注意的是，当元素其中内容没有超过其高度或者宽度的时候，该属性是取不到的。
2可读可写属性
所谓的可读可写属性指的是不仅能通过js获取该属性的值，还能够通过js为该属性赋值。
- scrollTop和scrollLeft
这对属性是可读写的，指的是当元素其中的内容超出其宽高的时候，元素被卷起的高度和宽度。
1.dom.scrollTop=20;
2.dom.onscroll=function(){..code..
}
复制代码- obj.style.*属性
对于一个dom元素，它的style属性返回的是一个对象，这个对象中的任意一个属性是可读写的。如obj.style.top,obj.style.wdith等，在读的时候，他们返回的值常常是带有单位的(如px),同时，对于这种方式，它只能够获取到该元素的行内样式，而并不能获取到该元素最终计算好的样式，这就是在读取属性值得时候和以上只读属性的区别，要获取计算好的样式，请使用obj.currentstyle（IE）和getComputedStyle(IE之外的浏览器)。另一方面，这些属性能够被赋值，js运动的原理就是通过不断修改这些属性的值而达到其位置改变的，需要注意的是，给这些属性赋值的时候需要带单位的要带上单位，否则不生效。
二、Event对象
在js中，对于元素的运动的操作通常都会涉及到event对象，而event对象也存在很多位置属性，且由于浏览器兼容性问题会导致这些属性间相互混淆，这里一一讲解。
- clientX和clientY
这对属性是当事件发生时，鼠标点击位置相对于浏览器可视区的坐标，即浏览器左上角坐标的（0,0），该属性以浏览器左上角坐标为原点，计算鼠标点击位置距离其左上角的位置。
不管浏览器窗口大小如何变化，都不会影响点击位置的坐标。
- screenX和screenY
这对属性是事件发生时鼠标相对于屏幕的坐标，以设备屏幕的左上角为原点，事件发生时鼠标点击的地方即为该点的screenX和screenY值。
- offsetX和offsetY
这一对属性是指当事件发生时，鼠标点击位置相对于该事件源的位置，即点击该div，以该div左上角为原点来计算鼠标点击位置的坐标。
- pageX和pageY
顾名思义，该属性是事件发生时鼠标点击位置相对于页面的位置，通常浏览器窗口没有出现滚动条时，该属性和event.clientX及event.clientY是等价的，但是当浏览器出现滚动条的时候，pageX通常会大于clientX，因为页面还存在被卷起来的部分的宽度和高度。