不同浏览器对于有些css3属性名字定义的时候，会带上特有的前缀，所以在css编写的时候，经常会一个属性写多个不同的前缀进行兼容。比如：
div{transform: rotate(30deg);-ms-transform: rotate(30deg); ???????/* IE 9 */-webkit-transform: rotate(30deg); ???/* Safari and Chrome */-o-transform: rotate(30deg); ???????/* Opera */-moz-transform: rotate(30deg); ???????/* Firefox */}有时候，我们需要通过js动态控制css3属性，这时候就需要根据不同的浏览器添加不同的前缀。当然，我们也可以将所有的前缀全部设置，就像以下这种方式：
<!DOCTYPE html><html> ?<head> ???<meta charset="utf-8"> ???<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0"> ???<title>JS控制CSS3，添加浏览器兼容前缀</title> ?</head> ?<body> ??????<div id="target" style="background: blue"> ?????测试 ??</div> ?</body> ?<script type="text/javascript"> ???var target = document.getElementById("target"); ????target.style.MozTransform = ‘rotate(30deg)‘; ???target.style.OTransform = ‘rotate(30deg)‘; ???target.style.msTransform = ‘rotate(30deg)‘; ???target.style.transform = ‘rotate(30deg)‘; ???target.style.webkitTransform = ‘rotate(30deg)‘; ???</script></html>这种方式能够设置属性成功，但是看起来就不是很优雅。代码冗余，而且设置了很多无效的属性。这里可以通过以下的方式，给不同的浏览器加上合适的前缀。
<!DOCTYPE html><html> ?<head> ???<meta charset="utf-8"> ???<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0"> ???<title>JS控制CSS3，添加浏览器兼容前缀</title> ?</head> ?<body> ???<div id="target" style="background: blue"> ?????测试 ???</div> ?</body> ?<script type="text/javascript"> ?var elementStyle = document.createElement(‘div‘).style; ?var vendor = (function(){ ?var transformNames = { ?????webkit: ‘webkitTransform‘, ?????Moz: ‘MozTransform‘, ?????O: ‘OTransform‘, ?????ms: ‘msTransform‘, ?????standard: ‘transform‘ ???}; ???for (var key in transformNames) { ?????if (elementStyle[transformNames[key]] !== undefined) { ???????return key; ?????} ???} ???return false; ?})(); ?function prefixStyle(style) { ???if (vendor === false) { ?????return false; ???} ???if (vendor === ‘standard‘) { ?????return style; ???} ???return vendor + style.charAt(0).toUpperCase() + style.substr(1); ?} ?target.style[prefixStyle(‘transform‘)] = ‘rotate(30deg)‘ ?</script></html>采用类似于能力检测的方式，找到对应浏览器内核支持的前缀。然后按照规则修改属性，添加前缀。
JS控制CSS3，添加浏览器兼容前缀
原文地址：http://www.cnblogs.com/caizhenbo/p/7569353.html