Question

我正在尝试创建一个通用函数，它将提取div内容（使用嵌套元素）并将其本地保存在HTML文件中。

基本上我得到div innerHTML，将其包装在html / head / body标签中然后保存：

function div2html() {
    var inner=document.getElementById("div2save").innerHTML;
    var html="<html><head></head><body>"+inner+"</body></html>";
    saveTextAsFile("div2html.html", html);
}

在此处查看有效版本：jsfiddle

但是我不知道如何处理类。正如您所看到的，示例中的类（bigbold）未嵌入到新HTML中。我需要一些方法来获取div中使用的所有类，然后将它们（或计算出的样式？）添加到我生成的html中..这可能吗？还有其他方法吗？

Answer 1

尝试在已保存的style

中加入.outerHTML元素html

function div2html() {
    var inner=document.getElementById("div2save").innerHTML;
    var style = document.getElementsByTagName("style")[0].outerHTML;
    var html="<html><head>"+style+"</head><body>"+inner+"</body></html>";
    saveTextAsFile("div2html.html", html);
}

jsfiddle http://jsfiddle.net/fb6s763w/1/

或者，使用window.getComputedStyle()仅选择css个#div2save子节点

function div2html() {
    var inner = document.getElementById("div2save");
    var style = window.getComputedStyle(inner.children[0]).cssText;
    var html = "<html><head><style>" 
               + "." + inner.children[0].className 
               + "{" + style + "}" 
               + "</style></head><body>" 
               + inner.innerHTML + "</body></html>";
    saveTextAsFile("div2html.html", html);
}

jsfiddle http://jsfiddle.net/fb6s763w/2/

Answer 2

看起来这可能会帮助你： https://github.com/Automattic/juice

Answer 3

如果页面的CSS不大，一个简单的解决方案是将其全部包含在保存的html中，如上面的guest271314所建议

var style = document.getElementsByTagName("style")[0].outerHTML;

请参阅jsfiddle

更全面的解决方案从div中提取类，然后只将这些类的规则添加到div中（使用How do you read CSS rule values with JavaScript?中的代码）

function div2html(divId) {
    var html = document.getElementById(divId).innerHTML;

    // get all css classes in html
    var cssClasses = [];
    var classRegexp = /class=['"](.*?)['"]/g;
    var m;
    while ((m = classRegexp.exec(html))) cssClasses = cssClasses.concat(cssClasses, m[1].split(" "));

    // filter non unique or empty cssClasses
    cssClasses = cssClasses.filter(function (item, pos, self) {
        return item && self.indexOf(item) == pos;
    });

    // get html of classes
    var cssHtml = '';
    for (var i = 0; i < cssClasses.length; i++) cssHtml += getRule('.' + cssClasses[i]);

    // assemble html
    var html = "<html><head><style>" + cssHtml + "</style></head><body>" + html + "</body></html>";
    console.log(html);
    saveTextAsFile("div2html.html", html);
}

请参阅jsfiddle

将div提取为HTML，包括CSS类

3 个答案: