获取元素的具体样式信息

获取元素的某一个具体的样式属性值

1、元素 . style . 属性名
需要把元素的样式都写在行内样式上才可以（写在样式表中是不管用的）

实际项目中，这种方式不常用，因为不能为了获取值而把所有样式都写在行内（无法实现CSS和HTML的分离）

2、使用window.getComputedStyle( )这个方法获取所有经过浏览器计算过的样式

所有经过浏览器计算过的样式：只要当前的元素标签可以在页面中呈现出来，那么它的所有的样式都是经过浏览器计算过的（渲染过的），哪怕这些样式你没有写，也可以获取到

window.getComputedStyle(a,b ):
参数a：当前要操作的元素对象
参数b：当前元素的伪类（一般不用伪类，而写null）
获取的结果是CSSStyleDeciaration这个类的一个实例：包含了当前元素的所有样式属性和值
console.log(window.getComputedStyle(div,null).height); //或者["height"]

在IE6-8下不兼容
因为window下没有getComputedStyle这个属性。
在IE6-8下使用currentStyle来获取所有经过浏览器计算过的样式

处理兼容

1、使用try、catch处理兼容：（一般不用）
前提：必须保证try中的代码在不兼容浏览器中执行的时候报错，这样的话才可以用catch捕获到异常的信息，进行其他处理。
不管当前是什么浏览器，都需要先把try中的代码执行一遍，报错之后再执行curEle.currentStyle，消耗性能。

//函数getCss：获取当前元素所有经过浏览器计算过的样式中的[attr]对应的值
//curEle：[object]当前要操作的元素对象
//attr：[string]要获取的样式属性的名称

function getCss(curEle,attr){
    var val=null;
    try{
         val=window.getComputedStyle(curEle,null)[attr];
    }catch(e){
         val=curEle.currentStyle[attr];
    }
    return val;
}

2、判断当前浏览器中是否存在这个属性或方法，存在就兼容，不存在就不兼容（最常用）

function getCss(curEle,attr){
    var val=null,reg=null;
    if("getComputedStyle" in window){ //--->如果返回的是true，说明window下有getComputedStyle这个属性，代表兼容
        val=window.getComputedStyle(curEle,null)[attr];
    }else{ //--->IE6-8
//-->如果传递进来的结果是opacity，说明像获取到的是透明度，但是在IE6-8下获取透明度需要使用filter
         if(attr==="opacity"){
                val=curEle.currentStyle["filter"];  //---->“alpha(opacity=10)”把获取到的结果进行剖析，获取里面的数字，让数字乘以100才和标准的浏览器保持了一致
                reg=/^alpha\(opacity=(\d+(?:\.\d+)?)\)$/i;  //--->(?:):代表只匹配不捕获
                val=reg.test(val)?reg.exec(val)[1]/100:1;
         }else{
         val=curEle.currentStyle[attr];
         }
    }
    //---->去掉单位
    reg=/^(-?\d+(\.\d+)?)(px|pt|rem|em)?$/i;
    return reg.test(val)?parseFloat(val):val;
}

3、通过检测浏览器版本和类型来处理兼容

function getCss(curEle,attr){
    var val=null;
    if(/MSIE(6|7|8)/.test(navigator.userAgent)){
        val=curEle.currentStyle[attr]; 
    }else{
       val=window.getComputedStyle(curEle,null)[attr];
    }
    return val;
}