获取浏览器及Dom宽高

参考文章：

https://blog.csdn.net/qq_36947128/article/details/80324538

http://www.cnblogs.com/jin-zhe/p/10506238.html

https://www.cnblogs.com/jyybeam/p/6183663.html

以元素的高度为例(宽度同理)，一般会用到下边四种获取高度：

height、offsetHeight、clientHeight、innerHeight

<style>
 .test{
    box-sizing:content-box;
    width:40px;
    height:30px;
    padding:5px;
    margin:5px;
    border:1px solid #000;
    background:#f0f;
}
</style>

<div class="test" id="test" style="height:50px;">test</div>
<div class="test" id="test1" >test1</div>

//获取DOM元素内联高度的值
var height = document.getElementById('test').style.height;
var height1 = document.getElementById('test1').style.height;

//offsetHeight= DOM元素高 + padding + border
 var offsetHeight = document.getElementById('test').offsetHeight;

//clientHeight= DOM元素高 + padding 
var clientHeight = document.getElementById('test').clientHeight;

//DOM无innerHeight属性
var DomInnerHeight = document.getElementById('test').innerHeight;

//Window才有innerHeight属性
var WindowInnerHeight = window.innerHeight;
                
console.log('height:'+height+',',
            'height1:'+height1+',',
            'offsetHeight:'+offsetHeight+',',
            'clientHeight:'+clientHeight+',',
            'DomInnerHeight:'+DomInnerHeight+',',
            'WindowInnerHeight:'+WindowInnerHeight);
//console
//height:50px, height1:, offsetHeight:62, clientHeight:60, DomInnerHeight:undefined, WindowInnerHeight:463