如何实现一个autoprefixer

该文章发布于 ，归类于 Javascript。

使用js操作DOM元素样式时，如果在不知道前缀的情况下，每次都要添加不少浏览器兼容前缀的代码，会显得代码十分多，可不可以实现自动检测浏览器前缀，自动添加合适的前缀的方法呢？

要实现这个功能，其实是对浏览器进行能力检测，通过设置特定属性，检测浏览器前缀。

实现细节如下：

const elementStyle = document.createElement('div').style

let prefix = (() => {
  let prefixMap = {
    webkit: 'webkitTransform',
    Moz: 'MozTransform',
    O: 'OTransform',
    ms: 'msTransform',
    standard: 'transform'
  }

  for (let key in prefixMap) {
    if (elementStyle[prefixMap[key]] !== undefined) {
      return key
    }
  }

  return false
})();

const autoPrefixStyle = prop => {
  if(!prefix) return false

  if(prefix === 'standard') return prop

  return prefix + prop.charAt(0).toUpperCase() + prop.substr(1)
}

此时，比如我设置css属性时，该方法会自动为其添加前缀。

例如在chrome浏览器中

autoPrefixStyle('transform')
//输出：webkitTransform

如无特殊声明，文章均为原创，若有不正之处，万望告知。转载请附上原文地址，十分感谢！

本文地址：https://www.leevii.com/?p=1512

相关文章