有時在寫頁面時，需要獲取一個div的高度。怎么才能獲取呢？哈哈，先上結論。有兩種方法。
- offsetHeight 、clientHeight
- getComputedStyle
offsetHeight 與 clientHeight
這兩個屬性都能獲取元素的高度，它們有什么區別呢？
代碼說話~
<!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的值包括元素內容+內邊距+邊框，而clientHeight的值等於元素內容+內邊距。區別就在於有沒有邊框~
但是，問題來了，我們想獲取元素本身的高度呢？於是——
請往下看~
1，有小伙伴可能會說，我們可以直接利用style屬性獲取元素高度。然而在上面的代碼中，
console.log(div.style.height) // '' 為空！
這是因為style屬性只能獲取元素標簽style屬性里的值。對於一個光禿禿的<div>，style的輸出是空的。
下面把內部樣式表中的高度注釋掉，寫在行內樣式中，改動如下。
#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 完美獲得元素高度。
可是。問題又來了，如果我們每次都要寫成內聯樣式，也太費事了吧。那么，該怎么辦？
2，getComputedStyle
getComputedStyle方法獲取的是最終應用在元素上的所有CSS屬性對象（即使沒有CSS代碼，也會把默認的祖宗八代都顯示出來）；這和style屬性只能獲取內聯樣式的行為形成了鮮明的對比。除此之外，getComputedStyle是只讀的，但是style能文能武，可讀可寫，我們也可以利用它動態設置元素的高度。
我們只需輸入這么一行代碼。
window.getComputedStyle(div); 我只截了部分，可以清晰地看到，getComputedStyle方法取得了元素的所有樣式。
嗯，很適合查詢。
可是我們只想要高度呀。那就讓getPropertyValue方法來幫忙getPropertyValue方法可以獲取CSS樣式申明對象上的屬性值。
如。
console.log(window.getComputedStyle(div).getPropertyValue('height')); // 200px 耶，問題解決。
順便要說一下，currentStyle屬性也可以利用，不過這是IE瀏覽器的自娛自樂。兼容性極差。
想要更深入研究的，請參考張鑫旭大神的博客獲取元素CSS值之getComputedStyle方法熟悉，再次膜拜大神~
---8.16補充---
根據@漫漫前端的評論，還有一種方法。
Element.getBoundingClientRect()方法獲取與元素相關的CSS屬性邊框集合。
返回對象中共有6個屬性。
當計算邊界矩形時，會考慮視口區域（或其他可滾動元素）內的滾動操作，也就是說，當滾動位置發生了改變，top和left屬性值就會隨之立即發生變化（因此，它們的值是相對於視口的，而不是絕對的）。如果不希望屬性值隨視口變化，那么只要給top、left屬性值加上當前的滾動位置（通過window.scrollX和window.scrollY），這樣就可以獲取與當前的滾動位置無關的常量值。
詳情請參考 Element.getBoundingClientRect()
再次END。
作者：公子七
鏈接：https://www.jianshu.com/p/58c12245c2cc
來源：簡書
簡書著作權歸作者所有，任何形式的轉載都請聯系作者獲得授權並注明出處。
原文 JS獲取div高度的方法