js 获取元素的具体样式信息getcss(实例讲解)

/*      curEle:[object] 当前要操作的元素对象       attr:[string] 我们要获取的样式属性的名称      1、使用try、catch来处理兼容（只有在不得已的情况下）        前提:必须保证try中的代码在不兼容的时候报错，这样才可以catch捕获到错误信息,进行其他的处理        不管当前的浏览器是否支持这个方法，都需要把try中的代码执行一遍，如果当前是IE7，window.getComputedStyle不兼容，但是也需要执行一遍再执行catch里面的代码，执行了两遍，消耗性能，      2、判断当前浏览器中是否存在这个属性或者方法，存在就兼容，不存在就不兼容      3、通过检测浏览器版本和类型来处理兼容 window.navigator.userAgent      获取当前浏览器是IE6-8          */    function getCss(curEle,attr){      var val = null;      //方法2      if("window.getComputedStyle" in window){//或者window.getComputedStyle        var = window.getComputedStyle(curEle,null)[attr];      }else{        var = curEle.currentStyle[attr];      }      //方法1      try{        var = window.getComputedStyle(curEle,null)[attr];      }catch(e){        var = curEle.currentStyle[attr];      }      //方法3      if(/MSIE (6|7|8)/.test(navigator.userAgent)){        var = curEle.currentStyle[attr];      }else{        var = window.getComputedStyle(curEle,null)[attr];      }      return val;        }

console.log(getCss(box,"border"))    console.log(getCss(box,"fontFamily"))

function getCss(curEle,attr){      var val = null;      var reg = null;      if(/MSIE (6|7|8)/.test(navigator.userAgent)){        var = curEle.currentStyle[attr];      }else{        var = window.getComputedStyle(curEle,null)[attr];      }      reg = /^(-?/d+(/./d+)?)(px|pt|rem|em)?$/i;      return reg.test(val)?parseFloat(val):val; //这样写肯定不行，对于某些样式属性的值是不能去单位的，例如：float position margin padding border  这些复合值 background      }

function getCss(curEle,attr){      var val = null;      var reg = null;      if(/MSIE (6|7|8)/.test(navigator.userAgent)){        if(attr==="opacity"){          val = curEle.currentStyle["filter"];          //把获取到的结果剖析，获取里面的数字，让数字除以100才和标准浏览器保持一致          reg = /^alpha/(opacity=(/d+(?:/./d+)?)/)$/i;          val = reg.test(val)?reg.exec(val)[1]/100:1        }else{          val = curEle.currentStyle[attr];        }              }else{        //如果传递进来的结果是opacity，说明我想获得的是透明度，但是在IE6-8下获取透明度需要使用filter        val = window.getComputedStyle(curEle,null)[attr];      }    }