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

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

一、封装prefixStyle.js 

let elementStyle = document.createElement('div').stylelet 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添加属性前缀了