js把css样式转成内嵌

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

//根据容器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

原文地址:https://www.cnblogs.com/evemen/p/12613202.html

时间: 2024-11-04 17:10:33

js把css样式转成内嵌的相关文章

js获取css样式方法

一.CSS样式共有三种:内联样式(行间样式).内部样式.外部样式(链接式和导入式) <div id="a" style="width: 100px;height: 100px;"></div> <style type="text/css"> #a{ width: 100px; height: 100px; } </style> <body> <div id="a"

js操纵css样式

操作元素的Style样式属性 1.格式对比: 演示代码: css样式属性: background-color color font font-family font-weight ..... JS样式属性: style.backgroundColor style.color style.font style.fontFamily style.fontWeight ..... 2.使用DOM的style对象 javascript样式表分为:内嵌式样式表:内联式样式表:外联式样式表. 操作元素的st

JS 控制CSS样式表

JS控制CSS样式,首先得确定一点,CSS与HTML页面的链接方式,因为CSS有3种与HTML页面结合的方式,不同的方式也会产生不同的结果. 下面先记录一下JS控制CSS所使用的方法. 1.使用javascript更改某个css class的属性... 1 <style type="text/css"> 2 .orig { 3 display: none; 4 } 5 </style> 你想要改变把他的display属性由none改为inline. 解决办法:

js 获取css 样式

style只能获取元素的行间样式. 原生代码获取css里的样式,currentStyle只适用于IE,getComputedStyle适用于FF.opera.safari.chrome. function getStyle ( obj, attr ) { return obj.currentStyle?obj.currentStyle[attr] : getComputedStyle( obj )[attr]; } js 获取css 样式

用JS读写CSS样式的方法总结

为了日后方便查询,本人翻阅了一些资料总结了以下方法,如有不对的地方欢迎指出! 一.可以通过DOM节点对象的style对象(即CSSStyleDeclaration对象)来读写文档元素的CSS样式    如:var elm = document.getElementById('test'); elm.style.color = 'black'; 二.通过Element对象的getAttribute().setAttribute().removeAttribute()直接读写style属性    如

用原生JS读写CSS样式的方法总结

一.可以通过DOM节点对象的style对象(即CSSStyleDeclaration对象)来读写文档元素的CSS样式    如:var elm = document.getElementById('test'); elm.style.color = 'black'; 二.通过Element对象的getAttribute().setAttribute().removeAttribute()直接读写style属性    如:elm.setAttribute('style','color:red;li

JS设置CSS样式的几种方式

用JS来动态设置CSS样式,常见的有以下几种 1. 直接设置style的属性  某些情况用这个设置 !important值无效 如果属性有'-'号,就写成驼峰的形式(如textAlign)  如果想保留 - 号,就中括号的形式  element.style['text-align'] = '100px'; element.style.height = '100px'; 2. 直接设置属性(只能用于某些属性,相关样式会自动识别) element.setAttribute('height', 100

JS设置CSS样式的集中方式

1. 直接设置style的属性  某些情况用这个设置 !important值无效 如果属性有'-'号,就写成驼峰的形式(如textAlign)  如果想保留 - 号,就中括号的形式  element.style['text-align'] = '100px'; element.style.height = '100px'; 2. 直接设置属性(只能用于某些属性,相关样式会自动识别) element.setAttribute('height', 100); element.setAttribute

js读取CSS样式表样式

js中obj.style.height不能直接取css样式和嵌入的样式(style标签包起来的), 需要用 getComputedStyle  但IE又不支持,只能这样做: function getstyle(obj) { return window.getComputedStyle ? window.getComputedStyle(obj, null).height : obj.currentStyle.height; }