js中书写兼容性的css样式

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/haochangdi123/article/details/82148956

我们在写CSS的时候会写兼容各个浏览器的CSS前缀，甚至我们已经有了类似于postcss这样的插件，可以自动加上浏览器前缀。但是有时我们需要在JS中增加CSS样式，这时我们再加CSS前缀的时候会比较麻烦类似于下面这样：

div.style['transform'] = `translate3d(0, 100px, 0)`;
div.style['-webkit-transform'] = `translate3d(0, 100px, 0)`;

我们发现为了兼容，我们需要对同一样式进行多次赋值。

方法解决
为了解决这个问题可以写一个方法，这里我们以transform为例

// 对js操作transfrom进行封装
let elementStyle = document.createElement('div').style;
// 供应商对应的不同属性
let vendor = (() => {
  let transformsName = {
    webkit: 'webkitTransform',
    Moz: 'MozTransform',
    O: 'OTransform',
    ms: 'msTransform',
    standard: 'transform'
  };

  for (let key in transformsName) {
    if (elementStyle[transformsName[key]] !== undefined) {
      return key;
    }
  }

  return false;
})();

export function profixStyle(style) {
  if (vendor === false) {
    return false;
  }
  if (vendor === 'standard') {
    return style;
  }
  return vendor + style.charAt(0).toUpperCase() + style.substr(1);
}

使用：

const transform = profixStyle('transform');
div.style[transform] = `translate3d(0, 100px, 0)`;