DOMObj.style[attr] 只能获取行内样式,在现代浏览器中,有DOMObj.getComputedStyle 方法可以获得浏览器渲染计算后的属性值。
以下就不同浏览器中进行获取 css 样式进行封装。
//需要规避复合值的问题 margin padding
//把带获取到带单位的把单位去掉 px em pt rem deg
function getCss(curEle,attr){
//处理带单位的问题
var reg = /^(-?\d+\.?\d+)(?:px|em|pt|deg|rem)$/;
var val = null;
if(/MSIE (?:6|7|8)/.test(window.navigator.userAgent)){
debugger
//这里处理filter的滤镜问题 alpha(opacity=40);
if(attr === 'opacity'){
//alpha(opacity=40)
val = curEle.currentStyle['filter'];
var reg1 = /^alpha\(opacity=(\d+(\.\d+)?)\)/;
return reg1.test(val) ? RegExp.$1/100 : 1;
}else{
val = curEle.currentStyle[attr];
}
}else{
val = window.getComputedStyle(curEle,null)[attr];
}
return reg.test(val)? parseFloat(val) :val ; //如果正则验证通过,寿命返回值是带单位的,那么我们就要人为去掉这个单位。否则不变
}