我们在做一些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) // 添加前缀+首字母大写
}

FEATURED TAGS

canvas chrome扩展 csapp github javascript localstorage nginx reactnative vue.js web websocket 函数式编程哲学微信公众号微信小程序微信浏览器德国观念论意识形态拉康数据结构离散数学算法算法导论精神分析计算机原理黑格尔齐泽克

对DOM样式操作浏览器前缀做抽象包装

TOC

代码

FEATURED TAGS