js把css样式转成内嵌

通过邮件内容是要内嵌样式的

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
//根据容器ID来渲染行内样式,避免长时间卡顿
    let translateStyle = contentId => {
        const sheets = document.styleSheets;
        const sheetsArry = Array.from(sheets);
        const $content = $('#' + contentId);
        sheetsArry.forEach(sheetContent => {
            const { rules, cssRules } = sheetContent;
            //cssRules兼容火狐
            const rulesArry = Array.from(rules || cssRules || []);
            rulesArry.forEach(rule => {
                const { selectorText, style, styleMap } = rule;
                //全局样式不处理
                if (selectorText !== '*') {
                    //兼容某些样式在转换的时候会报错
                    try {
                        const select = $content.find(selectorText);
                        select.each(domIndex => {
                            const dom = select[domIndex];
                            let i = 0;
                            const domStyle = window.getComputedStyle(dom, null)
                            while (style[i]) {
                                //样式表里的className是驼峰式,转换下便对应上了
                                const newName = style[i].replace(/-\w/g, function (x) {
                                    return x.slice(1).toUpperCase();
                                });
                                $(dom).css(style[i], domStyle[newName]);
                                i++;
                            }
                        })
                    } catch (e) {
                        console.log('转换成行内样式失败');
                    }
                }
            })
        })
    }
 
    translateStyle("main-page");

  转自:https://www.jianshu.com/p/d5f2aa752583

posted @   evemen  阅读(805)  评论(0编辑  收藏  举报
(评论功能已被禁用)
编辑推荐:
· .NET Core 中如何实现缓存的预热?
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列:向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· Linux系列:如何用heaptrack跟踪.NET程序的非托管内存泄露
阅读排行:
· TypeScript + Deepseek 打造卜卦网站:技术与玄学的结合
· 阿里巴巴 QwQ-32B真的超越了 DeepSeek R-1吗?
· 【译】Visual Studio 中新的强大生产力特性
· 10年+ .NET Coder 心语 ── 封装的思维:从隐藏、稳定开始理解其本质意义
· 【设计模式】告别冗长if-else语句:使用策略模式优化代码结构
点击右上角即可分享
微信分享提示