<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#d1 {
width: 100px;
height: 200px;
border: 1px solid red;
padding: 10px;
margin: 30px;
overflow: auto;
}
#dv2 {
width: 100%;
height: 400px;
background: green;
}
</style>
</head>
<body>
<div id="d1" style="height:200px;">
<div id="dv2"></div>
</div>
</body>
<script>
var d1 = document.getElementById('d1');
//d1.style.margin取值爲空，爲什麼？
console.log('margin:', d1.style.margin);
//試試獲取.style.height，值是200px。爲什麼？
console.log('d1 height:', d1.style.height);
//試試打印出d1.style。結果是：獲取到一個叫CSSStyleDeclaration的對象，
// 裏面的屬性全部爲空，除了height，因爲height在#d1元素的style屬性中。
// 證明：.style只能取得style屬性裏的樣式，而拿不到通過.class，#id引入的外部樣式。
console.log('d1.style:', d1.style);
//怎麼辦？？？！！！！！辦法是有的。
// 對不同瀏覽器使用不同，見函數getStyle()。
// (非IE)window.getComputedStyle(dom, '僞元素').屬性名
//或者 (IE)dom.currentStyle.屬性名
console.log('d1 margin2:', getStyle(d1, 'margin'));
console.log('--------------------------------------------------')
console.log('d1 margin:', getStyle(d1, 'margin'));
console.log('d1 margin:', parseInt(getStyle(d1, 'margin')) * 2);
console.log('d1 padding:', parseInt(getStyle(d1, 'padding')) * 2);
console.log('d1 border:', parseInt(getStyle(d1, 'border')) * 2);
console.log('----------------------------------------')
console.log('d1 height:', getStyle(d1, 'height'),'解釋：height = 真實height-橫向scrollbarHeight(僅chrome); 如果沒有橫向滾動條高度則等於height，滾動條一般高17px。');
console.log('height in chrome,firefox,ie8,ie11','183px,200px,200px,200px');
// clientHeight
console.log('d1 clientHeight:', d1.clientHeight, '。解釋：clientHeight = 真實height + padding - 橫向scrollbarHeight(所有瀏覽器) ; 滾動條一般高17px。');
console.log('clientHeight in chrome,firefox,ie8,ie11','全部203');
// offsetHeight
console.log('d1 offsetHeight:', d1.offsetHeight, '。解釋：offsetHeight = 真實height + padding + border。');
console.log('clientHeight in chrome,firefox,ie8,ie11','全部222');
// scrollHeight
console.log('d1 scrollHeight:', d1.scrollHeight);
console.log('clientHeight in chrome,firefox,ie8,ie11','420,410,410,410');
function getStyle(obj, cssAttr) {
return obj.currentStyle ? obj.currentStyle[cssAttr] :
window.getComputedStyle(obj, null)[cssAttr];
}
</script>
</html>瀏覽器使用Chrome（62.0.3202.94），firefox(55.0.3 )，IE8, IE11
有點暈了？ 看看結論。
一、
1.對於height：
沒有橫向滾動條，各瀏覽器表現一致。
在出現橫向滾動條的情況下：#dv1的高度在不同的瀏覽器下面，表現居然不一樣。chrome下，需要減去滾動條高度17。其它瀏覽器下，就是css中定義的高度。
2.對於clientHeight
沒有橫向滾動條，各瀏覽器表現一致。同爲：clientHeight = 真實height + padding
在出現橫向滾動條的情況下：各瀏覽器表現一致。 clientHeight = 真實height + padding-橫向scrollbarHeight(所有瀏覽器) ; 滾動條一般高17px。
3.對於offsetHeight
在出現橫向滾動條和沒有橫向滾動條的情況下：各瀏覽器表現一致。 offsetHeight = 真實height + padding + border。
4.對於scrollHeight(還有疑問)
在出現橫向滾動條和沒有橫向滾動條的情況下：chrome與其它不一樣，其餘瀏覽器表現一致。
chrome：scrollheight = padding+ 內容box的高度。
其餘瀏覽器：scrollheight = padding*2 + 內容box的高度。
2018———————-補充
二、爲什麼style.height有時候會取不到值？
1. 最常使用的document.getElementById(XX).style只能取到元素style屬性中的css屬性。對於link或其它形式定義的css屬性無法取到，比如一個
不要着急，另外一個函數可以滿足我們的需求，它就是window.getComputedStyle(“元素”)或者window.getComputedStyle(“元素”,”僞類”)，也就是第二個參數可選。window.getComputedStyle可以獲取作用於當前元素的所有的css屬性值，牛吧！
2. 兼容性：
桌面設備：IE9以上，其它Chrome,Firefox,Opera,Safasi 都支持。
移動設備：IE Mobile WP7以上，其它的Android,FireFox Mobile,Opera Mobile, Safari Mobile都支持。
3. 與currentStyle區別。
元素.currentStyle是IE瀏覽器的屬性。如：document.documentElement.currentStyle。其它瀏覽器沒有這個屬性。元素.currentStyle不支持僞類樣式獲取。
4.進階——getPropertyValue方法。
兩者取到的結果實際一樣的。
window.getComputedStyle(document.documentElement).height，
window.getComputedStyle(document.documentElement).getPropertyValue(‘height’)
只是。。。對某些屬性，如float。沒法用window.getComputedStyle(document.documentElement).float獲取，屬性要寫成cssFloat或者styleFloat，這時使用getPropertyValue就可以屏蔽兩者差異，用一種寫法window.getComputedStyle(document.documentElement).getPropertyValue(‘float’)就可以做到。注意getPropertyValue不支持駝峯寫法，支持肉串寫法，如background-color.
兼容性：IE9以上，其它瀏覽器均可。
遇到IE6-IE8.就使用 getAttribute(“屬性名”)，這時的屬性名要用駝峯！
這篇寫得很詳細–張鑫旭的：
https://www.zhangxinxu.com/wordpress/2012/05/getcomputedstyle-js-getpropertyvalue-currentstyle/