......是一个巨大的痛苦。
var transform = 'translate3d(0,0,0)';
elem.style.webkitTransform = transform;
elem.style.mozTransform = transform;
elem.style.msTransform = transform;
elem.style.oTransform = transform;
是否有库/框架/更好的方法来执行此操作?最好只用一行JS?
答案 0 :(得分:23)
我不知道任何执行此操作的库,但如果它们都只是前缀 - 也就是说,名称或语法没有区别 - 自己编写函数这将是微不足道的。
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;
}
然后你可以在大多数情况下使用它。
答案 1 :(得分:13)
目前已经到了2015年底,情况略有改变。首先,McBrainy对上述资本化的评论很重要。 webkit
前缀现在是Webkit
,但幸运的是此时仅供Safari使用。 Chrome和Firefox都支持el.style.transform
现在没有前缀,我认为IE也可以。以下是针对手头任务的稍微更现代的解决方案。它首先检查我们是否需要为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)';
答案 2 :(得分:6)
您可以使用带有以下代码的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的博客:https://davidwalsh.name/vendor-prefix
答案 3 :(得分:2)
有这个jquery插件可以处理它 https://github.com/codler/jQuery-Css3-Finalize
答案 4 :(得分:0)
如果您使用Gulp设置工作流程,例如,您可以使用Postcss autoprefixer这是解决浏览器供应商前缀的便捷工具。它使用JS来转换你的css。