使用javascript设置供应商前缀CSS
…是一种巨大的痛苦使用javascript设置供应商前缀CSS,javascript,css,vendor-prefix,Javascript,Css,Vendor Prefix,…是一种巨大的痛苦 var transform = 'translate3d(0,0,0)'; elem.style.webkitTransform = transform; elem.style.mozTransform = transform; elem.style.msTransform = transform; elem.style.oTransform = transform; 有没有一个库/框架/更好的方法来做到这一点?最好只使用一行JS?我不知道有哪一个库可以做到这一点,但如果它
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;
}
然后,您可以在大多数情况下使用它。有一个jquery插件可以处理它
您可以使用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)
};
})();
上面返回相应浏览器的供应商前缀的对象
在我的脚本中保存了大量重复代码
资料来源——大卫·沃尔什的博客:现在是2015年末,情况略有变化。首先,麦克布莱尼对上述资本化的评论很重要。
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)';
例如,如果您使用Gulp设置工作流,您可以使用Postcss,这是解决浏览器供应商前缀问题的便捷工具。它使用JS转换css。确保属性名称大写(
transform
,而不是transform
)。我以艰难的方式发现了这一点……他并没有要求使用jquery工具。@AdamArold他要求的是“一个库/框架/更好的实现方法”。这可能是一个jQuery插件请直接在此处发布外部链接答案的相关部分,因为外部源可能会更改。此方法忽略了以下事实,即样式声明中始终存在供应商前缀属性。似乎Firefox对非前缀转换的支持现在相当普遍: