要素のスタイルをそのまま取り出して、要素をコピーして保存する

要素のスタイルを見た目をそのまま保存したくないですか？

出来るんですよ。 computedStyle を使えば出来ます。

大昔は 紙Copiとかあったし、あの人はそのまま、カーリル作ったりGyazo買収して忙しそうですけど。ScrapBoxはちょっと依存強すぎてすきになれないので、自前で作るかと昔のソース引っ張り出してた。

要素の見た目保持したやつ、現代のDOM API だととても簡単にかける。

cloneNode に少し細工する

cloneNode だと要素は取れてもスタイルは取れないので、要素のスタイルを取ってきて、見た目をそのままに、完全にコピーするような感じで、取ってくる。

キャプチャ画像にはかなわないけど、ある程度までは近くなる。

スタイルをそのまま、要素を取り出す方法。

これだけです。

   var clone_node_recursively = function( src, deep, with_css ){
        var src = src
        var dst = src.cloneNode(deep);
        if (with_css){
            dst.style.cssText = document.defaultView.getComputedStyle(src, "").cssText;
            var a = src.querySelectorAll('*');
            var b = dst.querySelectorAll('*');
            var c = Array.from(a).map( function (e,idx) {
                return [a[idx], b[idx]]
            } )
            c.forEach(function (e,i) {
                e[1].style.cssText = document.defaultView.getComputedStyle(e[0], "").cssText;
            })
        }
        return dst
    }

ポイント

ここで、要素に当たってるCSSの情報をテキストファイル化してる。

 document.defaultView.getComputedStyle(src, "").cssText

あとは、子要素をたどるだけ。簡単。ただ、親要素の背景の上に乗ってたりするので、背景色は取ってこれないのが難点ですね。背景がなかったらかなり印象が違ってしまう。

動作例

実行サンプル←右のサイドバーからデータ取ってくる（PCのみ

出力例

出力されたHTML

なつかしい

昔は、これでサービス作って一儲けだみたいな某K氏と夢を語ってたけど、あれからもう10年かー早いな。

当時のブラウザだと、body を見た目のままソノママ取り出そうとすると、計算量と出力HTMLが膨大になって使い物にならなったけど、現代のブラウザとCPUだと軽々動くんですよねー、生まれる時代を間違えたんじゃないか。