获取元素宽高及位置的方法

js的人一定会接触到client家族、scroll家族和offset家族。由于width和Height属性是类似的，所以这里我只挑这三个height来讲一下。

clientHeight、offsetHeight、clientTop、innerWidth、outerWidth、scrollHeight、offsetTop、scrollTop，scrollY

1.clientHeight / clientWidth：
clientHeight和offsetHeight属性和元素的滚动、位置没有关系它代表元素的高度，对于inline的元素这个属性一直是0，单位px，只读元素。：

clientHeight = (content height) + (padding top+padding bottom);
翻译成中文就是 clientHeight = 内容实际高度 + 上下内边距。

简单的来说：在网页的盒子模型中，一个元素由内到外分别由 height + padding + border + margin组成，而clientHeight只取前面的height和padding。不管内容可不可见，即使你用定位把元素移出屏幕外，clientHeight获取到的值仍然不变。

此属性会将获取的值四舍五入取整数。 如果你需要小数结果, 请使用 element.getBoundingClientRect()

2.offsetHeight / offsetHeight：
offsetWidth和offsetHeight表示的是元素的可见宽度和高度，与元素有没有设置宽高没有直接关系。

包括padding、border、水平滚动条，但不包括margin的元素的高度。对于inline的元素这个属性一直是0，单位px，只读元素。

offsetHeight = height + padding + border.
即在clientHeight的基础上加上了上下border的高度。

同样的offsetHeight获取到的高度是网页实际渲染出来的高度+内边距+边框。和元素本身是否可见无关。

注：clientHeight和offsetHeight的注意点

当元素设置为display:none;之后，clientHeight和offsetHeight的高度均变为0，因为浏览器不会对display:none的元素进行渲染，所以使用时一定要注意这一点.
当父元素没有明确高度时，clientHeight和offsetHeight计算高度时，