js操作样式自动prefix

2017-11-01 2,983 阅读1分钟

前言

在用vue写一个项目时，编译时vue-loader会自动给css加上合适的前缀，无需手动添加，无疑方便了很多。但是过程中，经常要用js动态添加样式，如此添加的样式就需要手动添加浏览器前缀了。相当的麻烦，还容易出错。下面介绍一种解决方法供大家参考。

获取样式表

首先的获取该浏览器支持的样式表，可以通过创建一个空标签来获取

var sty = document.createElement("div").style

通过chrome控制台打印出来是这样的(ps: 不同浏览器结果不同)

遍历样式表

现在前缀主要有这四种：webkit,moz,o,ms
通过遍历来匹配对应的前缀并返回

var vendor = (() => {
    let transformNames = {
        webkit: 'webkitTransform',
        moz: 'mozTransform',
        ms: 'msTransform',
        o: 'oTransfrom',
        Default: 'transform'
    };

    for(let key in transformNames) {
        if(sty[transformNames[key]] !== undefined) {
            return key;
        }
    }
    // 若都找不到，说明这个浏览器有毛病啦
    return false;
})();

使用

最后再封装成函数，即可使用了

function prefixStyle(style) {
    if(vendor === false) {
        return false;
    }

    if(vendor === 'Default') {
        return style;
    }
    //    对应前缀 +       首字母大写           +  剩余部分
    return vendor + style.charAt(0).toUpperCase() + style.substr(1);
}

测试

以上就是js中的css prefix。欢迎大家分享更多的解决办法。