在做前端開發(fā)時，經(jīng)常要在css3的屬性前加上各瀏覽器廠商的前綴：

• 如果是在css中，編輯器自帶的功能一般可以實現(xiàn)，或者通過gulp、webpack打包時也都有插件實現(xiàn)自動添加
• 如果是在js中，可以用下面的代碼：封裝成一個prefixStyle()函數(shù)復(fù)用

//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)
}

然后，在頁面中調(diào)用，如下：

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

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

el.style[transform] = 'translate3d(0, 0, 0)'  //這里的 el 根據(jù)實際情況替換成DOM節(jié)點
el.style[transition] = 'all 0.4s ease'

還有另外一種封裝方式，原理相同，只是根據(jù)使用場景不同，自己區(qū)分用哪個吧！
就不在這里廢話了，貼個鏈接
http://blog.163.com/mity_rui@126/blog/static/109813618201542724555/

最后簡單看下原理

這么一坨代碼，其實分析一下，最重要的應(yīng)該是第一句了

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

在瀏覽器中打印下看看（我只看了火狐和谷歌，其他瀏覽器下，有興趣的自己試試）

火狐瀏覽器下

谷歌瀏覽器下

結(jié)果已經(jīng)很明顯了！
當(dāng)你單獨測試一下具體的屬性值，例如“transform”。如果沒有你想要的屬性，瀏覽器會返回undefined，如果有，會返回一個空的String字符串。
剩下的工作就是讓我們的程序來識別這些特征了。