JS操作CSS3属性时自动添加前缀

在做前端开发时，经常要在css3的属性前加上各浏览器厂商的前缀：

• 如果是在css中，编辑器自带的功能一般可以实现，或者通过gulp、webpack打包时也都有插件实现自动添加
• 如果是在js中，可以用下面的代码：封装成一个prefixStyle()函数复用

//dom.js文件
let elementStyle = document.createElement('div').style

function vendor(prop) {
    let ucProp = prop.charAt(0).toUpperCase() + prop.substr(1)
    let transformNames = {
        webkit: `webkit${ucProp}`,
        Moz: `Moz${ucProp}`,
        O: `O${ucProp}`,
        ms: `ms${ucProp}`,
        standard: prop
    }

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

    return false
}

export function prefixStyle(style) {
    const ret = vendor(style)
    if (ret === false) {
      return false
    }

    if (ret === 'standard') {
      return style
    }

    return ret + style.charAt(0).toUpperCase() + style.substr(1)
}

然后，在页面中调用，如下：

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

const transform = prefixStyle('transform')
const transition = prefixStyle('transition')

el.style[transform] = 'translate3d(0, 0, 0)'  //这里的 el 根据实际情况替换成DOM节点
el.style[transition] = 'all 0.4s ease'

还有另外一种封装方式，原理相同，只是根据使用场景不同，自己区分用哪个吧！
就不在这里废话了，贴个链接
http://blog.163.com/mity_rui@126/blog/static/109813618201542724555/

最后简单看下原理

这么一坨代码，其实分析一下，最重要的应该是第一句了

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

在浏览器中打印下看看（我只看了火狐和谷歌，其他浏览器下，有兴趣的自己试试）

火狐浏览器下

谷歌浏览器下

结果已经很明显了！
当你单独测试一下具体的属性值，例如“transform”。如果没有你想要的属性，浏览器会返回undefined，如果有，会返回一个空的String字符串。
剩下的工作就是让我们的程序来识别这些特征了。