2

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;
    }
}

ただし、オブジェクトを複製しようとすると、複製されたバージョンには color:blue または width: 10px プロパティが bluecolor スタイル ルールにありません。

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

これは、Javascript を介してルールを変更するときに、元のドキュメントのスタイル ノードが Chrome/Firefox で更新されないという事実に関係していると思います。ただし、これはIEには当てはまりません。(これは Chrome のバグですか?) この問題を示すサンプル コードは次のとおりです: http://jsfiddle.net/T4aCC/29/

私の最終目標は、元のドキュメントの文字列表現 (Chrome で) を生成することです。ただし、cloneNode を介してこれを行うことができないか、Javascript を介して CSS タイルを更新する方法が正しくありません。助言がありますか？

4

0 に答える 0