js实现不同浏览器内核的style属性前缀添加

正如我之前的那篇博文CSS3之transform属性最开始所述，针对不同的浏览内核的transform有不同的书写规则，如果需要兼容各浏览器的话，所有写法都需要调用。不管是使用CSS设置DOM元素的transform属性，还是使用js实现，都不可避免的增加了代码的数量。

针对一个项目中需要多次添加不同元素不同状态下的变换属性，我们可以实现一个针对不同的浏览器内核添加前缀的方法，此后只需要在不同的项目组件中调用方法即可：

<script type="text/javascript">
let elementStyle = document.createElement('div').style

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

  for (let key in transformNames) {
     if (elementStyle[transformName[key]] !== undefined) {
       console.log(key)
       return key
    }
  }

   return false
})()

function prefixStyle(style) {
  if (prefix === false) {
     return false
  }
  if (prefix === 'standard') {
     return style
  }
   return prefix + style.charAt(0).toUpperCase() + style.substr(1)
}
console.log(prefixStyle('transform'))
</script>

上述代码在chrome浏览器中的结果如下图所示：

 在一个完整的项目中，我们也可以使用export导出prefixStyle方法，在需要使用的其他模块中引入这个方法，直接使用。

//src/common/js/dom.js
...
export function prefixStyle(style){...}
...

//src/base/...
import {prefixStyle} from 'src/common/js/dom'

const transform = prefixStyle('transform')
...
this.$refs.progButton.style[transform] = `translate3d(${offsetWidth}px,0,0)`
...