javascript 当前元素 js 获取元素样式属性值

js获取元素样式的具体信息

var box = document.getElementById("dian");
 获取元素的某一个具体形式属性值

1.元素.style.属性名
 ->这种方式需要要元素的样式写在行内（写在样式表中不获取不到）
 ->在真实项目中，这种方式不常用，因为不能为了获取把所有样式写在行内（无法实现css和html分离）

2.使用window.getComputedStyle这个方法获取所有经过浏览器计算过的样式。
->所有经过浏览器计算过的样式：只要当前的元素标签可以在页面中呈现出来，那么它的所有的样式都是经过浏览器计算过得（渲染过的）->哪怕有些没有写的样式也可以获取到。
->语法：window.getComputedStyle(当前要操作的元素对象，当前元素的伪类一般不写伪类写null)。
console.log(window.getComputedStyle(box,null).width);//或者
console.log(window.getComputedStyle(box,null)["width"]);

3.方法虽然好用但是在ie6-8下不兼容：因为window没有getComputedStyle这个属性->ie6-8执行这个方法会报错
 console.log(window.getComputedStyle);//undefined
 ->在ie6-8中可以使用currentStyle来获取所有经过浏览器计算过的样式。
 console.log(box.currentStyle.width);

 1)利用try catch(e) 解决兼容问题
 ->curEle:获取样式的元素
 ->attr:获取样式的属性

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

 

2)利用判断是否有getComputedStyle属性解决兼容问题 性能比try catch好

function getCss(curEle,attr){
      var val = null;
      if("getComputedStyle" in window){
            val = window.getComputedStyle(curEle,null)[attr];
      }else{
            val = curEle.currentStyle[attr];
      }
      return val;
 }

console.log(getCss(box,"width"));

 

3) 通过检测浏览器版本和类型处理兼容
 ->window.navigator.userAgent 获取浏览器信息
 获取当前浏览器为ie6-8
 ->/MSIE(6|7|8)/.test(navigator.userAgent);

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;
 }
console.log(getCss(box,"width"));

 

第一次升级：把获取到单位的样式值单位值去掉
->只有符合”数字+单位/数字“才可以使用parseFloat

function getCss(curEle,attr){
           var val = null,reg = null;
           if("getComputedStyle" in window){
                    val = window.getComputedStyle(curEle,null)[attr];
           }else{
                    val = curEle.currentStyle[attr];
           }
           reg = /^(-?\d+(\.\d+)?)(px|pt|rem|em)?$/i;
           return reg.test(val)?parseFloat(val):val;
 }
 console.log(getCss(box,"width"));

 

第二次升级：有些属性在浏览器上是不兼容的例如opacity

function getCss(curEle,attr){
           var val = null,reg = null;
           if("getComputedStyle" in window){
                   val = window.getComputedStyle(curEle,null)[attr];
           }else{
                  if(attr === "opacity"){
                        val = curEle.currentStyle["filter"];
                        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;
}
console.log(getCss(box,"width"));