获取元素具体样式信息

window.getComputedStyle(  元素 ,null)   // 但是IE6 -8不支持

获得一个对象  包含当前存在的所有样式

通过 window.getComputedStyle(元素,null).height   或者window.getComputedStyle(元素,null)["height"] //获该元素取具体的某一个样式

添加伪类后 可以获取伪类中的样式

window.getComputedStyle(元素,after).content   获取元素after伪类中的content中内容

 

IE下  使用  元素.currentStyle.height    来获取当前元素的某个具体样式

 

 

 

兼容处理

1、性能消耗较大

function getCss(curEle,attr){

       var  val = null ;

  try{

      var  = 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){    //判断浏览器是否存在该属性

 

      var  = 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+?)(rem|rm|px|)?$/i;

 

 return      reg.test(val)?parseFloat(val):val;

 

}

 opacity  1.0      ie 不兼容   

filter:alpha(opacity=10);

 

posted on 2017-12-25 20:05  cm笔记簿  阅读(352)  评论(0编辑  收藏  举报

导航