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

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中使用驼峰命名，—转换为大写
}

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)`