js 浏览器兼容css中webkit、Moz、O、ms...写法…

2018-09-10 01:06:38来源:博客园 阅读 ()

新老客户大回馈,云服务器低至5折

/**
*浏览器兼容写法封装
*/
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)
}

//调用

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

div.style[transform] = `translate3d(0,0,0)` 等同于  div.style['transform'] = `translate3d(0,0,0)`

div.style[backdrop] = `blur(4px)`等同于  div.style['backdrop'] = `blur(4px)`

 

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:用原生js对表格排序

下一篇:快速配置webpack