欢迎评论,指出不足,表达建议~
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<title>Document</title>
</head>
<body>
<script type="text/javascript">
//一、基础if语句写的兼容。
function getStyle(obj,attr){
if(obj.currentStyle){
return obj.currentStyle[attr];
}
return getComputedStyle(obj,null)[attr];
}
console.log(getStyle(obj,attr))
//二、用try,catch。会消耗性能
function getCss(obj,attr){
var val=null;
try{
val=window.getComputedStyle(obj,null)[attr];//需要报错,才能捕获。执行两遍,消耗一点性能。
}catch{
varl=obj.currentStyle[atter];
}
return val;
}
console.log(getCss(obj,attr))
//三、用for~in来判断window下有没有这个属性。
function getCss(obj,attr){
var val=null;
if("getComputedStyle" in window)//另一种(typeof window.getComputedStyle==="function")//判断当前浏览器是否有这个属性
{
val=window.getComputedStyle(obj,null)[attr];
}else{
val=obj.currentStyle[attr];
}
return val;
}
console.log(getCss(obj,"attr"))
//四、强化升级。for~in的优化获取val值得单位去除问题,以及opacity的兼容
function getCss(obj,attr){
var val=null,reg=null;//新建正则筛选
if("getComputedStyle" in window)
{
val=window.getComputedStyle(obj,null)[attr];
}else{//IE6~8兼容opacity
if(attr==="opacity"){
val=obj.currentStyle["filter"];
reg=/^alpha\(opacity=(\d+(?:\.\d+)?)\)$/i;
val=reg.test(val)?reg.exec(val)[1]/100:1;
}else{
val=obj.currentStyle[attr];
}
}
reg=/^(-?\d+(\.\d+)?)(px|pt|rem|em)?$/i;//不属于这个规则的不去除单位。
return reg.test(val)?parseFloat(val):val;
//先前方法缺点,有些值是字符串float、position。NAN
//margin、border。这些复合值。用不了
}
console.log(getCss(obj,"opacity"))
//最后、上面都是检测当前浏览器是否有那个属性。还可以检测浏览器版本。
//获取浏览器版本信息:window.navigator.userAgent
</script>
</body>
</html>
你的意中人踏过无数bug来接你~