JS 應用篇(一)：JS獲取元素的高度

介紹幾種使用JS獲取div尺寸的方法，本篇博客以獲取下面這個示例code的高度爲例。

<style>
*{
	margin:0;
	padding:0;
}
#demo {
	display:inline-block;
	width: 100px;
	height: 200px;
	background: yellow;
	margin: 10px;
	padding: 20px;
	border: 2px solid blue;
}
</style>
<div id="demo">hello</div>
複製代碼

1、offsetHeight

var div = document.getElementById('demo');
console.log(div.offsetHeight); // 244 注意這裏返回的值不帶有單位
複製代碼

offsetHeight的值包括元素內容+內邊距+邊框

offsetHeight = content + padding + border = 200 + 20 * 2 + 2 * 2 = 244

2、clientHeight

var div = document.getElementById('demo');
console.log(div.clientHeight); // 240 注意這裏返回的值不帶有單位
複製代碼

clientHeight的值包括元素內容+內邊距

clientHeight = content + padding = 200 + 20 * 2 = 240

3、window.getComputedStyle()

getComputedStyle()獲取的是最終應用在元素上的全部CSS屬性對象（即便沒有CSS代碼，也會把默認的屬性都顯示出來）而且getComputedStyle()是隻讀的，經過getPropertyValue()獲取CSS樣式申明對象上的屬性值。

console.log(window.getComputedStyle(div).getPropertyValue("height")); //200px  注意這裏返回的值帶有單位。
複製代碼

4、getBoundingClientRect()

getBoundingClientRect()方法獲取與元素相關的CSS屬性邊框集合。返回對象中共有如下幾個屬性：

屬性的以下圖解釋：

var div = document.getElementById('demo');
console.log(div.getBoundingClientRect().height);// 244
複製代碼

height的屬性值 = 元素內容+內邊距+邊框