四二、js操作DOM(dom)改变css3属性时封装方法使自动识别浏览器添加css3属性前缀

CSS3属性很多需要带各浏览器的前缀，当使用DOM操作来改变CSS3属性时代码会很多并且麻烦

一、封装prefixStyle.js 

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

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

  for (let key in transformNames) {
    if (elementStyle[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)  //js中使用驼峰命名，—转换为大写
}

二、页面中使用

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

const transform = prefixStyle('transform')
const backdrop = prefixStyle('backdrop-filter')

this.$refs.layer.style[transform] = `translate3d(0,${translateY}px,0)`
this.$refs.filter.style[backdrop] = `blur(${blur}px)`

这样浏览器就会自动为CSS3添加属性前缀了