浏览器能力检测，JS修改transform动态添加webkit等前缀

实现代码

// 做浏览器能力检测，创建一个div 并拿到他的style
let elementStyle = document.createElement('div').style
// 定义个vendor供应商有哪些，做一个立即执行函数
let vendor = (() => {
  // 供应商 对应的transform name
  let transformNames = {
    webkit: 'webkitTransform',
    Moz: 'MozTransform',
    O: 'OTransform',
    // IE
    ms: 'msTransform',
    // 标准的
    standard: 'transform'
  }

  for (let key in transformNames) {
    // 遍历所有的transform 如果创建元素中elementStyle['webkitTransform']不为空就代表存在供应商前缀
    if (elementStyle[transformNames[key]] !== undefined) {
      // 都没有就会返回标准
      return key
    }
  }

  // 如果都不支持 就代表浏览器有问题
  return false
})()

// 根据浏览器能力检测结果，给用JS修改transform动态添加webkit等前缀
export function prefixStyle(style) {
  // 如果浏览器有问题 那么返回
  if (vendor === false) {
    return false
  }
  // 如果浏览器=标准 那么就返回传进来的
  if (vendor === 'standard') {
    return style
  }
  // 当有浏览器前缀的时候 返回 前缀 + 首字母大写 + 剩余部分
  return vendor + style.charAt(0).toUpperCase() + style.substr(1)
}

使用示例

以上代码是我在vue中做项目时候使用的，首先载入的时候就自动执行（避免每次调用每次执行），获取前缀，在使用的时候需要引用一下，直接执行prefixStyle即可。比如：

<div class="bg-layer" ref="layer"></div>

import { prefixStyle } from '...xx/xx';

// 引用能力检测，根据浏览器添加ms、webkit等
const transform = prefixStyle('transform')
const backdrop = prefixStyle('backdrop-filter')

// 设置layer的transform属性 这个属性需要根据浏览器的支持性添加前缀
this.$refs.layer.style[transform] = `translate3d(0, 10px, 0)`
/*
this.$refs.layer.style['transform'] = `translate3d(0, 10px, 0)`
this.$refs.layer.style['webkitTransform'] = `translate3d(0, 10px, 0)`
 */


// 同理 使用变量替代字符串 动态添加前缀
this.$refs.layer.style[backdrop] = `blur(10px)`
/*
this.$refs.layer.style['backdrop-filter'] = `blur(10px)`
this.$refs.layer.style['webkitBackdrop-filter'] = `blur(10px)`
*/