前言
最近在工作中遇到了一個問題，某個需求需要獲取元素的高度，就假定是div元素，但是呢因為div中元素的內容高度是不確定的，所以並沒有給div設置高度，在獲取高度時，我們首先會想到3種方法
1、div.style.height;
我們會發現輸出空，這是因為style對象獲取的是定義在內聯樣式中的屬性，所以不可行。
2、$(div).css("height");
我們會發現輸出0，很正常因為我們根本沒定義height
3、window.getComputedStyle(div)
圖中僅截取部分屬性
仍然輸出0，getComputedStyle()會獲取到最終應用在元素上的所有CSS屬性對象（即使沒有CSS代碼，也會把默認的祖宗八代都顯示出來）,這樣看來，因為我們沒有定義height，為0也很正常
解決辦法
其實我們可以使用jquery中的height()方法
$(div).height()
輕松解決，但是有個問題需要注意，使用這種方法獲取到的高度是元素在頁面中的實際高度，包括單位，因為存在一種情況就是，我們在css中給出的是px，但是在代碼中我們通過某種方式將頁面中所有的px轉化為rem，所以我們使用height()獲取到的高度值單位為rem，這種轉換經常在移動端開發中應用
當然$(height).innerHeight()和$(height).outterHeight()都可以獲取到，他們之間的區別如下圖
終極battle
發現使用以上的四種方法也不好用，高度仍然為0
在這種情況下我們就要考慮頁面中我們想要取其高度的元素以及其內容是否加載出來了，如果沒加載出來高度當然為0！！！
實戰情況
針對以上情況說幾種開發中會遇到的
情況一：
假定我們現在有一個div，而這個div中的內容是后端傳給我們的一個html大字段，我們可以在前端使用$(div).html(xxx)或div.innerHtml = xxx將后端傳給我們的數據在前端頁面展示出來，此時我們就要注意一定要在將數據渲染出來后再取其高度
情況二：
在情況一的基礎上，如果這個html大字段中存在許多圖片，那么可能存在的一種情況就是我們取到的元素高度小於元素的實際高度
原因：<img src=""/>資源加載需要時間，圖片的src的加載機制為異步加載，所以如果我們在取包含很多圖片並且高度不確定的元素的高度時，可以監聽圖片加載完的時間，然后在取其高度
方法：找到所有的img循環綁定onload事件
情況三：
切換三個tab展示不同內容，這種結構大家應該都見過，在開發中三個tab中的內容可能是后端傳給我們的數據，假如我們有個需求就是根據每個tab內容的高度來決定是否顯示一個see more按鈕，這個需求我們肯定需要獲取每個tab內容的高度，我們可以使用height()，當然要注意在內容加載出來后使用該方法獲取，還有一個需要注意的是因為我們開始時是將除了第一個tab的其他tab內容隱藏的，點擊時才展示出來的，所以對於第二個第三個tab我們要不僅要在內容加載出來后並且要在點擊后獲取他們的高度！！！
總結一下
第一個tab：內容加載完畢使用height()
第二個tab：內容加載完畢並點擊后使用height()
第三個tab：內容加載完畢並點擊后使用height()