JS控制CSS3，添加浏览器兼容前缀
Posted caizhenbo
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JS控制CSS3，添加浏览器兼容前缀相关的知识，希望对你有一定的参考价值。
不同浏览器对于有些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，添加浏览器兼容前缀的主要内容，如果未能解决你的问题，请参考以下文章