使用 javascript 设置供应商前缀的 CSS
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8889014/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Setting vendor-prefixed CSS using javascript
提问by Ender
...is a huge pain.
……是巨大的痛苦。
var transform = 'translate3d(0,0,0)';
elem.style.webkitTransform = transform;
elem.style.mozTransform = transform;
elem.style.msTransform = transform;
elem.style.oTransform = transform;
Is there a library/framework/better way to do this? Preferably with just one line of JS?
有没有图书馆/框架/更好的方法来做到这一点？最好只有一行 JS？
回答by Tikhon Jelvis
I don't know of any library that does this, but if they are all just prefixes--that is, there is no difference in name or syntax--writing a function yourself would be trivial.
我不知道有任何库可以做到这一点，但如果它们都只是前缀——也就是说，名称或语法没有区别——自己编写函数将是微不足道的。
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;
}
Then you can just use this in most cases.
然后你可以在大多数情况下使用它。
回答by cacheflowe
It's currently late 2015, and the situation has changed slightly. First of all, McBrainy's comment about capitalization above is important. The webkitprefix is now Webkit, but luckily only used by Safari at this point. Both Chrome and Firefox support el.style.transformwithout the prefix now, and I think IE does as well. Below is a slightly more modern solution for the task at hand. It first checks to see if we even need to prefix our transform property:
现在是 2015 年底，情况略有变化。首先，McBrainy 上面关于大写的评论很重要。该webkit前缀是现在Webkit，但幸运的是只有在这一点上使用Safari浏览器。Chrome 和 Firefoxel.style.transform现在都支持没有前缀，我认为 IE 也支持。下面是针对手头任务的稍微更现代的解决方案。它首先检查我们是否甚至需要为我们的转换属性添加前缀：
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';
})();
Afterwards, we can just use a simple one-liner call to update the transformproperty on an element:
之后，我们可以使用简单的单行调用来更新transform元素的属性：
myElement.style[transformProp] = 'translate3d(0,' + dynamicY + 'px,0)';
回答by hitesh kumar
You can find the respective vendor prefix using Javascript with the following code-
您可以通过以下代码使用 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)
};
})();
The above returns an object of the respective browser's vendor prefix.
以上返回相应浏览器供应商前缀的对象。
Saved a lot of duplicate code in my scripts.
在我的脚本中保存了很多重复的代码。
Source - David Walsh's blog: https://davidwalsh.name/vendor-prefix
来源 - David Walsh 的博客：https: //davidwalsh.name/vendor-prefix
回答by Andrea De Carolis
There's this jquery plugin that take care of it https://github.com/codler/jQuery-Css3-Finalize
有这个 jquery 插件可以处理它 https://github.com/codler/jQuery-Css3-Finalize
回答by roraima
If you are setting up your workflow with Gulp for example you can use Postcss autoprefixerwhich is handy tool in solving browser vendor prefixes. It uses JS to transform you css.
例如，如果您使用 Gulp 设置工作流程，则可以使用 Postcss autoprefixer，它是解决浏览器供应商前缀的便捷工具。它使用 JS 来转换你的 css。
