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

3,337 阅读1分钟

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 。
获取元素宽度的方法和结果跟上述一样。