一次性获取浏览器前缀

当你想用js去操作一些新特性的时候有没有对写前缀有种想死的赶脚。。。故去寻找了一番得到vendorprefix的方法,以减少重复劳动。

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];
  console.log(pre);
  return {
    dom: dom,
    lowercase: pre,
    css: '-' + pre + '-',
    js: pre[0].toUpperCase() + pre.substr(1)
  };
})();

//output
// {dom: "WebKit", lowercase: "webkit", css: "-webkit-", js: "Webkit"}

代码出处

这里的代码涉及了几个知识点:

  1. window.getComputedStyle
  2. Array.prototype.slice.call
  3. match