不一樣瀏覽器對於有些css3屬性名字定義的時候,會帶上特有的前綴,因此在css編寫的時候,常常會一個屬性寫多個不一樣的前綴進行兼容。好比:javascript
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屬性,這時候就須要根據不一樣的瀏覽器添加不一樣的前綴。固然,咱們也能夠將全部的前綴所有設置,就像如下這種方式:css
<!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>
這種方式可以設置屬性成功,可是看起來就不是很優雅。代碼冗餘,並且設置了不少無效的屬性。這裏能夠經過如下的方式,給不一樣的瀏覽器加上合適的前綴。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>
採用相似於能力檢測的方式,找到對應瀏覽器內核支持的前綴。而後按照規則修改屬性,添加前綴。java