原生JS获取高度方法，去除padding、border、margin

一、常规知识：

网页可见区域宽： document.body.clientWidth
网页可见区域高： document.body.clientHeight
网页可见区域宽： document.body.offsetWidth (包括边线的宽)
网页可见区域高： document.body.offsetHeight (包括边线的高)
网页正文全文宽： document.body.scrollWidth
网页正文全文高： document.body.scrollHeight
网页被卷去的高： document.body.scrollTop
网页被卷去的左： document.body.scrollLeft
网页正文部分上： window.screenTop
网页正文部分左： window.screenLeft
屏幕分辨率的高： window.screen.height
屏幕分辨率的宽： window.screen.width
屏幕可用工作区高度： window.screen.availHeight
屏幕可用工作区宽度： window.screen.availWidth

二、原生获取div的高度思路：
1、需要注意：clientHeight是算上了padding值、所以不能直接用div.clientHeight，必须clientHeight减去padding值，才是真实高度。
2、通过原生获取padding-top值
使用style.paddingTop，该方式只能获取内联样式的padding-top值，而无法获得通过css样式表使用class加载进来的样式。
3、通过getComputeStyle获取padding值
getComputedStyle(document.getElementById(), false)["paddingTop"]获取，该方式在ie8浏览器不支持该方法。
4、所以必须判断是否ie8，如果ie8，使用document.getElementById().currentStyle["paddingTop"]获取，可以写一个getStyle方法：
var getStyle = function(dom, attr){ 
  return dom.currentStyle ? dom.currentStyle[attr] : getComputedStyle(dom, false)[attr];
}
5、即得到：
var clientHeight = div.clientHeight;
var paddingTop = Number(getStyle(div,"paddingTop").replace(/\s+|px/gi,""));
var paddingBottom = Number(getStyle(div,"paddingBottom").replace(/\s+|px/gi,""));
var height = clientHeight - paddingTop - paddingBottom;
需要注意的关键点：
或许大家看完，会觉得直接使用getStyle(div,"height")获取高度更快。不这样这是因为如果div没有写高度，例如通过里面的内容自动撑开的高度时，在ie8下高度获取出来是"auto"。