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

最新推荐文章于 2024-09-02 17:47:20 发布

原创最新推荐文章于 2024-09-02 17:47:20 发布 · 1.8k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#js获取高度 #cientHeight #offsetHeight #getComputedStyle #getBoundingClientRect

javascript 专栏收录该内容

15 篇文章

订阅专栏

本文介绍JavaScript中通过clientHeight、offsetHeight、getComputedStyle及getBoundingClientRect等方法获取元素高度的方式，并对比了不同方法的区别。

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 。

获取元素宽度的方法和结果跟上述一样。