JS 获取计算后的样式

1、html代码

div class="box"></div>

2、css样式

<style>
    .box {
         height: 200px;
         width: 200px;
         background-color: orange;
         border: 20px solid red;
    }
</style>

3、 获取计算后的样式

 ①非IE情况下：getComputedStyle(元素)[样式名]

var box = document.querySelector('.box');
var result = getComputedStyle(box)['height'];

  ②IE情况下：元素名.currentStyle[样式名]

var result = box.currentStyle['height'];
console.log(typeof result,result);

注意：①css样式+下划线或者不加下划线都支持；

           ②获取任意【元素】任意【css样式】值

           ③IE情况下，除了border。

 兼容性写法：

   function getStyle(ele,style){
        var result = '';
        //校验浏览器类型
        if(ele.currentStyle){
            result = ele.currentStyle[style];
        }else{
            result = getComputedStyle(ele)[style];
        }
        return result;
    }