javascript获取元素高度和宽度的方式 - cientHeight、offsetHeight、getComputedStyle、getBounding

javascript获取元素高度能够经过这几种方式获取：cientHeight、offsetHeight、getComputedStyle、getBoundingClientRect

clientHeight 获取的元素高度包括内边距。若是元素是 display: inline; 那么获得的结果是 0 。
offsetHeight 获取元素的高度，包括内边距和边框的宽度。若是元素是 display: inline; 那么获得的结果是 0 。
getComputedStyle Window.getComputedStyle()方法返回一个对象，是这个元素的css属性值。
例如：下面样式代码中，Window.getComputedStyle(document.getElementById('box')).height 为 100px

#box {
	background-color: skyblue;
	height: 100px;
	width: 100px;
	padding: 10px;
	border: 10px solid #999;
}
复制代码

若是元素是 display: inline; 那么获得的结果是 auto 。
getBoundingClientRect 该方法可用于获取元素相对于视口的 left 、top 、right 、bottom 以及元素宽高。 例如， document.getElementById('box').getBoundingClientRect().height 获得的高度包括 内边距和边框宽度。
若是元素是 display: inline; 那么获得的高度是 0 。
获取元素宽度的方法和结果跟上述同样。