将html中的style内联样式转换为行内样式

一棵开花的树，枝芽无限靠近你

已于 2022-11-08 16:28:29 修改

阅读量1.3k

点赞数 1

分类专栏：前端基础文章标签： html javascript 前端

于 2022-11-08 15:48:25 首次发布

本文链接：https://blog.csdn.net/weixin_45855469/article/details/127752323

版权

前端基础专栏收录该内容

10 篇文章

订阅专栏

本文介绍了一种将HTML中style标签内的内联样式转换为元素行内样式的JavaScript方法。该方法通过解析类名和样式规则，确保了样式的一致性和独立性。

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

需求：因为有一段html需要传递到其他的地方，内联样式可能与其他的样式冲突，所以要将写在style标签中的内联样式转换为行内样式

思路：

    /**
    * 参数接收html字符串
     * 将内联样式表里面的样式改为行内样式
    * */
    transStyle(html){
        /**
         * 检测有没有style标签
        * */
        const h = $(html)[0]
        const style = h.getElementsByTagName('style')[0]
        if(!style) return html
        const shtml = style.innerHTML.replace(/\n\s*/g,'')
        /**
         * 解析类名，暂时只处理类名。
        * */
        let s1 = shtml.split('}')
        s1 = s1.filter(item=>item!=="")
        const styleMap = this.generateStyleMap(s1)
        styleMap.forEach((val,key)=>{
            /**
             * 根据key类名获取元素
            * 为元素添加val 行内样式
            * */
            const elements = h.getElementsByClassName(key)
            let v = val.replace(/\s*/g,'')
            if(v[v.length-1]==';')v = v.slice(0,-1)
            Array.prototype.forEach.call(elements, function (element) {
                const s = element.getAttribute('style')
                if(!s){
                    element.setAttribute('style',v)
                }else{
                    if(s[s.length-1]==';') element.setAttribute('style',s+v)
                    else element.setAttribute('style',s+";"+v)
                }
            });
        })
        style.parentNode.removeChild(style)
        return h.outerHTML
    }
    generateStyleMap(arr){
        const m = new Map()
        arr.forEach(item=>{
            let s2 = item.split('{')
            if(!(/,/).test(s2[0])){
                const k = s2[0].slice(1)
                this.addStyleMapItem(m,k,s2[1])
            }else{
                let s3 = s2[0].split(',')
                s3=s3.map(item=>item.slice(1))
                s3.forEach(i=>{
                    this.addStyleMapItem(m,i,s2[1])
                })
            }
        })
        return m
    }
    addStyleMapItem(map,key,addItem){
        if(map.has(key)){
            let v = map.get(key).trim()
            if(v[v.length-1]!==';') v=v+";"
            v = map.get(key)+addItem
            map.delete(key)
            map.set(key,v)
        }else{
            map.set(key,addItem)
        }
    }