JS原生之getStyle的全面封装及正则优化

欢迎评论，指出不足，表达建议~
<!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来接你~
JS原生之getStyle的全面封装及正则优化

猜你喜欢
