經常會在做屬性相容的時候頻繁的這種類似的程式碼

 transition:width 2s;
 -moz-transition:width 2s; /* Firefox 4 */
-webkit-transition:width 2s; /* Safari and Chrome */
 -o-transition:width 2s; /* Opera */

　　這樣的字首寫起來十分繁瑣影響開發進度為此封裝出一下方法

let elemnetStyle =document.createElement('div').style
let vendor =(()=>{
  let transformNames = {
    webkit:'webkitTransform',
    Moz:'MozTransform',
    O:'msTransform',
    standard:'transform',
  }
  for(let key in transformNames){
    if(elemnetStyle[transformNames[key]] !== undefined){
      return key
    }
  }
  return false
})()

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

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

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

　　呼叫的時候

主要思路就是：

1.先建立一個div元素，獲取它的style屬性

2.通過vendor方法遍歷屬性匹配出當前的瀏覽器核心型別

3.將需要做相容的屬性通過prefixStyle方法傳入，最後return出對應瀏覽器的相容屬性