处理在js写css样式在各个浏览器的兼容问题

最新推荐文章于 2020-08-25 17:24:59 发布

冬天爱吃冰淇淋

最新推荐文章于 2020-08-25 17:24:59 发布

阅读量428

点赞数

分类专栏： js css 文章标签： css js html

本文链接：https://blog.csdn.net/weixin_44823731/article/details/106921586

版权

js 同时被 2 个专栏收录

34 篇文章 0 订阅

订阅专栏

css

9 篇文章 1 订阅

订阅专栏

前言：在开发前端项目的时候，我们有时候需要通过js来操作css的样式，对于不同的浏览器，我们可以要把一个样式书写很多遍，例如我们在为某个元素添加transform样式的时候：

let app = document.getElementById('app')
app.style.transform = 'scale(1.5)' // 正常浏览器
app.style['webkitTransform'] = 'scale(1.5)' // 谷歌浏览器
app.style['mozTransform'] = 'scale(1.5)' // 火狐浏览器
.....其他浏览器等等

如果我们经常需要在js中添加样式，那么代码量就会变得非常的巨大。我们可以通过封装一些方法来处理这个浏览器兼容问题。封装完之后，我们就可以用一句就代码就处理各个浏览器样式名的写法。

app.style[prefixStyle('transform')]= 'scale(1.5)' // 处理上述重复代码

第一步：

创建一个dom对象，获取他的style属性

let elementStyle = document.createElement('div').style

第二步：

创建一个自调用函数，在函数里面，创建一个transform样式在各个浏览器的写法。然后遍历这个对象，使用elementStyle来判断在目前浏览器transform的写法，然后返回对应浏览器的标识：

    let vendor = (() => {
        // 3.存储各个浏览器的样式写法。用transform来做比较
        let transformNames = {
            webkit: 'webkitTransform',
            o: 'OTransform',
            moz: 'MozTransform',
            ms: 'msTransform',
            standard: 'transform'
        }
        // 遍历transformNames对象
        for (let key in transformNames) {
            // 判断style上是否存在对应的属性
            if (elementStyle[transformNames[key]] !== undefined) {
                // 存在就返回
                return key
            }
        }
        // 样式出错返回false
        return false
    })()

第三步：

封装一个处理样式写法的函数，接收参数的css属性字符串，返回该样式在目前浏览器支持的写法：

    // 4.编写处理样式函数
    function prefixStyle(style) {
        console.log(vendor)
        // 出错
        if (!vendor) {
            return
        }
        // 正常
        if (vendor === 'standard') {
            return style
        }
        // 各个浏览器的兼容
        return vendor + style.charAt(0).toUpperCase() + style.substr(1)
    }

第四步：

使用封装的函数，假如我们需要在js中添加transform样式，我们可以这样做：

    let app = document.getElementById('app')
    // 获取transform在目前浏览器的兼容写法
    const transform = prefixStyle('transform')
    // 添加css样式
    app.style[transform] = 'scale(1.5)

例子全部代码：

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
</head>

<body>
    <div id="app" style="width: 100px;height: 100px; background-color: red;"></div>
</body>
<script>
    // 1.创建一个元素，使用他的style属性
    let elementStyle = document.createElement('div').style
    // 2.构建一个自动执行函数，让他返回浏览器的标识，例如：webkit(谷歌)、o(欧朋)、moz(火狐)、ms(ie)、standard(这个是用来标识正常的)。
    let vendor = (() => {
        // 3.存储各个浏览器的样式写法。用transform来做比较
        let transformNames = {
            webkit: 'webkitTransform',
            o: 'OTransform',
            moz: 'MozTransform',
            ms: 'msTransform',
            standard: 'transform'
        }
        // 遍历transformNames对象
        for (let key in transformNames) {
            // 判断style上是否存在对应的属性
            if (elementStyle[transformNames[key]] !== undefined) {
                // 存在就返回
                return key
            }
        }
        // 样式出错返回false
        return false
    })()
    // 4.编写处理样式函数
    function prefixStyle(style) {
        console.log(vendor)
        // 出错
        if (!vendor) {
            return
        }
        // 正常
        if (vendor === 'standard') {
            return style
        }
        // 各个浏览器的兼容
        return vendor + style.charAt(0).toUpperCase() + style.substr(1)
    }
    console.log(prefixStyle('transform')) // webkitTransform
    console.log(prefixStyle('fontSmooth')) // webkitFontSmooth
    console.log(prefixStyle('fontSize')) // webkitFontSize
    let app = document.getElementById('app')
    // 获取transform在目前浏览器的兼容写法
    const transform = prefixStyle('transform')
    // 添加css样式
    app.style[transform] = 'scale(1.5)'
</script>

</html>