Question

我正在尝试生成HTML文档的字符串表示形式，以便我可以将其发送到另一个服务，该服务将生成当前文档的克隆版本以进行打印。

原始HTML文档需要使用Javascript添加一些样式：

// create the style node
var $style = $("<style type='text/css' rel='stylesheet' />").appendTo($("head"));

// create the style rule
var rules = [];
rules.push(".bluecolor {  }");
if ($style[0].styleSheet) { // IE
    $style[0].styleSheet.cssText = rules.join(" ");
} else {
    $style[0].appendChild(document.createTextNode(rules.join(" ")));
}

// later on in the code...

// set the style rule's color to blue
var sheets = document.styleSheets;
for (var i = 0; i < sheets.length; i++) {
    if ((sheets[i].ownerNode || sheets[i].owningElement) == $style[0]) {
        var stylesheet = sheets[i];
        var cssRules =  (stylesheet.cssRules || stylesheet.rules);
        for (var i = 0; i < cssRules.length; i++) {
            if (matches = /\.bluecolor/.exec(cssRules[i].selectorText)) {
                cssRules[i].style.color = "blue";
                cssRules[i].style.width = "10px";
            }
        }
        break;
    }
}

但是，当我去克隆对象时，克隆版本没有颜色：蓝色或蓝色样式规则中的宽度：10px属性：

var clonedDocument = document.getElementsByTagName('html')[0].cloneNode(true);

我认为这与以下事实有关：在通过Javascript修改规则时，原始文档中的样式节点无法在Chrome / Firefox中更新。但是在IE中并非如此。（这是Chrome错误吗？）以下是演示此问题的示例代码：http://jsfiddle.net/T4aCC/29/

我的最终目标是生成原始文档的字符串表示（在Chrome中）。但是，我无法通过cloneNode和/或我通过Javascript更新CSS tyles的方式不正确。有什么建议吗？

克隆HTML文档并生成字符串表示时，不会复制原始文档中的CSS样式规则

0 个答案: