使用JavaScript设置供应商前缀的CSS

Question

...非常痛苦。

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

有没有库/框架/更好的方法来做这件事？最好只用一行JS代码实现。

- Ender

Answer 1

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

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

在大多数情况下，您可以直接使用这个。

- Tikhon Jelvis

---

请确保将属性名称大写 (Transform 而不是 transform)，我通过艰难的方式发现了这一点... - Brian McCutchon

关于JavaScript中供应商前缀的CSS属性名称的大写：请注意，要将它们大写，尽管在Webkit中实际上并不重要！ - Alan H.

我必须说，这个答案确实比问题中的略微好一点:D - Brainmaniac

Answer 2

现在是2015年末，情况略有变化。首先，McBrainy上面提到的大写问题很重要。webkit前缀现在改为Webkit，但幸运的是目前只有Safari使用。Chrome和Firefox现在支持不带前缀的el.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)';

- cacheflowe

---

看起来Firefox现在支持非前缀变换的范围相当广泛：http://caniuse.com/#search=transform - Matt Jensen

Answer 3

您可以使用以下代码通过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

- hitesh kumar

---

请直接在此处发布您外部链接答案的相关部分，因为外部来源可能会更改。 - IngoAlbers

这种方法利用了样式声明中始终存在供应商前缀属性的事实。 - Rohit Singh Sengar

Answer 4

这里有一个jQuery插件可以解决这个问题： https://github.com/codler/jQuery-Css3-Finalize。

- Andrea De Carolis

---

他没有要求使用jQuery工具。 - Adam Arold

他要求“一个库/框架/更好的方法来做这件事”。这可以是一个jQuery插件。 - Gust van de Wal

Answer 5

如果您正在使用Gulp设置工作流程，例如，您可以使用Postcss autoprefixer来解决浏览器供应商前缀问题。它使用JS来转换您的CSS。

- roraima