14

......是一个巨大的痛苦。

var transform = 'translate3d(0,0,0)';
elem.style.webkitTransform = transform;
elem.style.mozTransform = transform;
elem.style.msTransform = transform;
elem.style.oTransform = transform;

有没有图书馆/框架/更好的方法来做到这一点?最好只有一行JS?

4

5 回答 5

28

我不知道有什么库可以做到这一点,但如果它们都只是前缀——也就是说,名称或语法没有区别——自己编写一个函数将是微不足道的。

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;
}

然后你可以在大多数情况下使用它。

于 2012-01-17T02:59:03.643 回答
17

现在是 2015 年末,情况略有变化。首先,McBrainy 关于上述大写的评论很重要。webkit前缀是 now ,但幸运的是此时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';
})();

之后,我们可以只使用一个简单的单行调用来更新transform元素的属性:

myElement.style[transformProp] = 'translate3d(0,' + dynamicY + 'px,0)';
于 2015-09-13T07:01:57.783 回答
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

于 2015-07-21T13:03:34.477 回答
2

有这个 jquery 插件可以处理它 https://github.com/codler/jQuery-Css3-Finalize

于 2012-01-17T09:46:26.260 回答
0

例如,如果您使用 Gulp 设置工作流程,您可以使用 Postcss autoprefixer,它是解决浏览器供应商前缀的便捷工具。它使用 JS 来转换你的 CSS。

于 2017-02-27T13:16:01.283 回答