有時在寫頁面時岖圈，需要獲取一個div的高度短条。怎么才能獲取呢？哈哈，先上結(jié)論命斧。有兩種方法芹壕。
- offsetHeight 、clientHeight
- getComputedStyle
offsetHeight 與 clientHeight
這兩個屬性都能獲取元素的高度背苦，它們有什么區(qū)別呢？
代碼說話~
<!DOCTYPE html>
<html>
<head>
<title>demo</title>
<meta charset="utf-8">
<style type="text/css">
#demo {
width: 100px;
height: 200px;
background: yellow;
margin: 10px;
padding: 10px;
border: 2px solid blue;
}
</style>
</head>
<body>
<div id="demo">hello</div>
<script type="text/javascript">
var div = document.getElementById('demo');
console.log(div.offsetHeight); // 224
console.log(div.clientHeight); // 220
</script>
</body>
</html>
可以看出
offsetHeight = content + border + padding = 200 + 2 * 2 + 10 * 2 = 224
clientHeight = content + padding = 200 + 2 * 10 = 220
兩個屬性的差距于是就顯而易見了壤躲。同樣返回元素的高度漏麦，offsetHeight的值包括元素內(nèi)容+內(nèi)邊距+邊框撕贞，而clientHeight的值等于元素內(nèi)容+內(nèi)邊距号涯。區(qū)別就在于有沒有邊框~
但是，問題來了域蜗，我們想獲取元素本身的高度呢丝蹭？于是——
請往下看~
1，有小伙伴可能會說茵典，我們可以直接利用style屬性獲取元素高度帆离。然而在上面的代碼中，
console.log(div.style.height) // ''
為空勉吻！
這是因為style屬性只能獲取元素標簽style屬性里的值源譬。對于一個光禿禿的<div>养渴，style的輸出是空的帆疟。
下面把內(nèi)部樣式表中的高度注釋掉，寫在行內(nèi)樣式中，改動如下灾测。
#demo {
width: 100px;
/*height: 200px;*/
background: yellow;
margin: 10px;
padding: 10px;
border: 2px solid blue;
}
<div id="demo" style="height: 200px">hello</div>
這個時候style屬性的輸出為
console.log(div.style.height) // 200px
完美獲得元素高度鲜结。
可是锈遥。問題又來了，如果我們每次都要寫成內(nèi)聯(lián)樣式，也太費事了吧奕巍。那么，該怎么辦辐啄？
2岭参，getComputedStyle
getComputedStyle方法獲取的是最終應(yīng)用在元素上的所有CSS屬性對象（即使沒有CSS代碼背亥，也會把默認的祖宗八代都顯示出來）轴猎；這和style屬性只能獲取內(nèi)聯(lián)樣式的行為形成了鮮明的對比捻脖。除此之外，getComputedStyle是只讀的惫搏，但是style能文能武，可讀可寫汰规，我們也可以利用它動態(tài)設(shè)置元素的高度刚梭。
我們只需輸入這么一行代碼票唆。
window.getComputedStyle(div);
我只截了部分朴读，可以清晰地看到，getComputedStyle方法取得了元素的所有樣式走趋。
嗯衅金，很適合查詢。
可是我們只想要高度呀。那就讓getPropertyValue方法來幫忙getPropertyValue方法可以獲取CSS樣式申明對象上的屬性值氮唯。
如鉴吹。
console.log(window.getComputedStyle(div).getPropertyValue('height')); // 200px
耶，問題解決惩琉。
順便要說一下豆励，currentStyle屬性也可以利用，不過這是IE瀏覽器的自娛自樂瞒渠。兼容性極差良蒸。
想要更深入研究的，請參考張鑫旭大神的博客獲取元素CSS值之getComputedStyle方法熟悉伍玖，再次膜拜大神~
---8.16補充---
根據(jù)@漫漫前端的評論嫩痰，還有一種方法。
Element.getBoundingClientRect()方法獲取與元素相關(guān)的CSS屬性邊框集合私沮。
返回對象中共有6個屬性。
上圖可以看出和橙，寬度和高度都是加了內(nèi)邊距和邊框值的仔燕，測試環(huán)境為Chrome。
對該對象上下左右的解釋如下圖魔招。
當計算邊界矩形時晰搀，會考慮視口區(qū)域（或其他可滾動元素）內(nèi)的滾動操作，也就是說办斑，當滾動位置發(fā)生了改變外恕，top和left屬性值就會隨之立即發(fā)生變化（因此，它們的值是相對于視口的乡翅，而不是絕對的）鳞疲。如果不希望屬性值隨視口變化，那么只要給top蠕蚜、left屬性值加上當前的滾動位置（通過window.scrollX和window.scrollY）尚洽，這樣就可以獲取與當前的滾動位置無關(guān)的常量值。
詳情請參考Element.getBoundingClientRect()
再次END靶累。
