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

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

1、元素.style.属性名

需要我们把元素的样式都写在行内样式上才可以（写在样式表中是不管用的）

console.log(box.style.height)  ->null

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

2、使用window.getComputedStyle(当前操作的元素对象，当前元素的伪类【一般我们不用伪类写null】)这个方法获取所有经过浏览器计算过的样式

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

获取的结果是CSSStyleDeclaration这个类的实例：包含了当前元素的所有样式属性和值

console.log(window.getComputedStyle);//function

console.log(window.getComputedStyle(box,null))["height"]

3、方法虽然好用，但是在IE6-8下是不兼容的：因为window下没有getComputedStyle这个属性->会报错

在IE6-8下我们可以使用currentStyle来获取所有经过浏览器计算过的样式

console.log(box.currentStyle)

console.log(box.currentStyle.height)

获取样式的兼容写法getCss：获取当前元素所有经过浏览器计算过的样式中的[attr]对应的值

/*      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"))