如何在阅读邮件时时保留原有html格式正文的样式

     思路是读邮件时先将邮件内容write到一个 iframe 元素中,然后通过下面这个函数去得到一些重要的样式值,收集这些值显示写到其style属性里,然后取得其 innerHTML,这样就可以部分保留html片段原先的格式。处理方法如下:

//没考虑兼容性,只支持 getComputedStyle 的浏览器
function traverse (node) {
    //定制想收集样式的结点
    var nodes = node.querySelectorAll("style,script,div,a,span,table,tr,th,tbody,td,hr,article,section,aside,header,img");
    var tempNode;
    var cssCollection; 
    //想收集的属性集合
    var needProp = ["background","border","boxShadow","color","content","cursor","display","float",
                    "font","fontFamily","fontSize","fontWeight",
                    "height","letterSpacing","lineHeight","margin","opacity","outline","overflow","padding",
                    "position","src","stroke","textAlign","visibility","whiteSpace","width",
                    "wordBreak","wordSpacing","wordWrap","zIndex","zoom"];   
    var i2 = 0, len = 0;    //迭代器
    var newCssText = "";    //组装新的style属性内容
    var l = nodes.length;
    if (l < 500) {       //如果内容矿长结点过多会影响性能,这里限制为500个以内结点 
         for (var i=0; i < l; i++) {
            tempNode = nodes[i];
            cssCollection = window.getComputedStyle(tempNode,null);
            if ("STYLESCRIPT".indexOf(tempNode.tageName) > -1) {//remove掉style 和script结点 
                node.removeChild(tempNode);
            } else {
                for (i2=0,len=needProp.length; i2 < len; i2++) {
                    newCssText += needProp[i2] + ":" + cssCollection[needProp[i2]] + ";";
                }
                tempNode.style.cssText = newCssText;
            }
        }
    }

    return node.innerHTML;
}


原文地址:https://www.cnblogs.com/ihada/p/2503430.html