vue-music(11) 不同浏览器前缀函数的封装

最新推荐文章于 2022-03-14 16:34:50 发布

望天一方

最新推荐文章于 2022-03-14 16:34:50 发布

阅读量175

点赞数

CC 4.0 BY-SA版权

分类专栏： vue-music 文章标签： vue

本文链接：https://blog.youkuaiyun.com/weixin_42372054/article/details/82425498

vue-music 专栏收录该内容

21 篇文章

订阅专栏

本文介绍了一个用于处理浏览器间CSS属性差异性的实用函数。通过检测不同浏览器对CSS transform属性的支持情况来确定并应用适当的前缀，确保了样式的一致性和兼容性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

因为有不同浏览器，所以许多属性要做跨浏览器使用，故而要加私有前缀。此处封装一个函数，进行统一设置

let elementStyles = doument.createElement('div').style // 创建一个div并获得其style

let vendor = (() => { // 立即执行函数
    let transformName = {
        webkit: 'webkitTransform', // 个浏览器商对于transform属性的私有前缀
        Moz: 'MozTransform',
        O: 'OTransform',
        ms: 'msTransform',
        standard: 'transform' // 没有前缀
    }
    for (var key in vendor){
        if(elementStyles[transformName[key]] !== undefined) { // 如果div属性中有概属性，那么返回浏览器商
            return key
        }
    }
    return false // 若没有该属性，则说明属性不支持 
})()

export function prefix (style) {
    if(vendor === false) {
        return false
    }
    if(vender === 'standard') {
        return style
    }
    return vendor + style.chart(0).toUpperCase() + style.substr(1) // 拼接带哟u前缀的属性格式
}