我们在写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)`;