原生js获取屏幕宽高，元素宽高/margin/padding

1.获取屏幕宽高

实现兼容

//获取屏幕高度
var windowHeight= document.documentElement.clientHeight || document.body.clientHeight;

//获取屏幕宽度
var windowWidth= document.documentElement.clientWidth || document.body.clientWidth;

2.获取元素宽高

兼容IE

<template>
  <div>
        <div class="div"></div>
        <button @click="btn">点击获取元素宽/高度/margin</button>
  </div>
</template>
<script>
export default {
    methods:{
        btn(){
        	//获取元素
            var oDiv = document.querySelector('.div')
       
            //使用，第一个参数元素，第二参数，元素的属性，如：width/height/margin/border都可以
            var oDivWidth = getStyle(oDiv, 'width')
            var oDivHeight = getStyle(oDiv, 'height')
            var oDivMargin = getStyle(oDiv, 'margin')
            console.log(oDivWidth)
            console.log(oDivHeight)
            console.log(oDivMargin)
        
            //兼容IE浏览器
            function getStyle(obj,attr){ 
                if(obj.currentStyle){ 
                    return obj.currentStyle[attr]; 
                } 
                else{ 
                    return document.defaultView.getComputedStyle(obj,null)[attr]; 
                } 
            }
        }
    }
}
</script>
<style>
    .div{
        width:100px;
        height:100px;
        margin-left:10px;
        background:greenyellow;
    }
</style>