使用javascript设置供应商的前缀CSS
…是一个巨大的痛苦。
var transform = 'translate3d(0,0,0)'; elem.style.webkitTransform = transform; elem.style.mozTransform = transform; elem.style.msTransform = transform; elem.style.oTransform = transform; 有没有一个库/框架/更好的方法来做到这一点？ 最好只用一行JS？
我不知道任何这样做的库，但是如果它们都只是前缀 – 也就是说，名称或语法没有区别 – 自己写一个函数将是微不足道的。
function setVendor(element, property, value) { element.style["webkit" + property] = value; element.style["moz" + property] = value; element.style["ms" + property] = value; element.style["o" + property] = value; }
那么你可以在大多数情况下使用它。
现在是2015年底，情况有所变化。 首先，McBrainy关于上述资本化的评论是重要的。 webkit前缀现在是Webkit ，但幸运的是，这个时候只能用于Safari。 Chrome和Firefox都支持el.style.transform ，现在没有前缀，我认为IE也是如此。 下面是一个稍微更现代化的解决scheme。 它首先检查我们是否需要在我们的transform属性前加上：
var transformProp = (function(){ var testEl = document.createElement('div'); if(testEl.style.transform == null) { var vendors = ['Webkit', 'Moz', 'ms']; for(var vendor in vendors) { if(testEl.style[ vendors[vendor] + 'Transform' ] !== undefined) { return vendors[vendor] + 'Transform'; } } } return 'transform'; })();
之后，我们可以使用一个简单的单行调用来更新元素的transform属性：
myElement.style[transformProp] = 'translate3d(0,' + dynamicY + 'px,0)';
您可以使用以下代码使用Javascript查找相应的供应商前缀：
var prefix = (function () { var styles = window.getComputedStyle(document.documentElement, ''), pre = (Array.prototype.slice .call(styles) .join('') .match(/-(moz|webkit|ms)-/) || (styles.OLink === '' && ['', 'o']) )[1], dom = ('WebKit|Moz|MS|O').match(new RegExp('(' + pre + ')', 'i'))[1]; return { dom: dom, lowercase: pre, css: '-' + pre + '-', js: pre[0].toUpperCase() + pre.substr(1) }; })();
以上返回了各自浏览器的供应商前缀的对象。
在我的脚本中保存了很多重复的代码。
来源 – David Walsh的博客： http : //davidwalsh.name
有这个jquery插件，照顾它https://github.com/codler/jQuery-Css3-Finalize
如果您使用Gulp设置工作stream程，例如您可以使用Postcss autoprefixer ，它是解决浏览器供应商前缀方便的工具。 它使用JS来转换你的CSS。
