我们在做一些DOM操作的时候,常常利用到修改样式来进行一个动画,但是这种用到的样式属性往往是有前缀的。而在CSS中其实是有自动prefix的插件来帮我去做,但是在JS中我们只能去自己写一些功能。为了让浏览器更好的去执行我们的样式。我们需要对这些进行一个包装,以便我们方便的去进行一个前缀的添加。

代码

let elementStyle = document.createElement('div').style
// 获取浏览器支持的所有样式前缀key
let vendor = (() => {
  let transformNames = {
    webkit: 'webkitTransform',
    moz: 'MozTransform',
    O: 'OTransform',
    standard: 'transform'
  }

  for (let key in transformNames) {
    if (elementStyle[transformNames[key]] !== undefined) {
      return key
    }
  }
  return false
})() // 立即执行函数 利用样式key探测来获取到浏览器的类型

export function prefixStyle(style) {
  if (!vendor) return // 浏览器故障
  if (vendor === 'standard') {
    return style
  }
  return vendor + style.charAt(0).toUpperCase() + style.substr(1) // 添加前缀+首字母大写
}