js小工具-快速给样式添加兼容性前缀如-webkit-等

1.简介

做PC段网页开发市场会遇到一些兼容性问题，一些常用的css3样式经常需要添加兼容性前缀，如transition: all .2s;在实际开发中css里面的写法经常是:

selector{
	/*分别兼容4种浏览器*/
	-webkit-transition: all .2s;
	-o-transition: all .2s;
	-ms-transition: all .2s;
	-moz-transition: all .2s;
	/*常规w3c属性*/
	transition: all .2s;
}

简单的来说，一般的浏览器属性兼容就是在w3c的标准属性里面加上浏览器专属的兼容前缀。（部分属性除外，如display:flex；在chrome的中的早期兼容代码为display: -webkit-box）；
兼容性前缀和浏览器的对应关系如下:

兼容模式	前缀
标准w3c属性	无
chrome浏览器(webkit内核)	-webkit-
firefox浏览器(mozila公司出品)	-moz-
IE浏览器(microsoft公司出品)	-ms-
opera浏览器	-o-

2.js中的css属性兼容

如上所说，在js中做css属性兼容一般只需要在这个在w3c的标准属性中加上对应前缀即可（这里使用jQuery的css方法对属性进行批量设置），代码如下：

//自动添加-webkit-等浏览器前缀，用于兼容css样式
	function getCompactCSS(key,value){
		var obj = {}
		if(!value){return null;}
		var cmps = ['-webkit-','-ms-','-moz-','-o-',''];
		for(var i=0;i<cmps.length;i++){
			obj[cmps[i]+key] = value;
		}
		return obj;
	}
	$('body').css(getCompactCSS('transform','translateX(100px)'));

注意：通过css方法设置的属性，如果不生效则不会显示在行内的style中。但是这样的设置应该是生效的，大家可以去旧的浏览器里试一下。

3.结语

本文写于20190826