如何实现一个autoprefixer

该文章发布于 ,归类于 Javascript 0 条评论

使用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

相关文章