javascript - ドキュメントの CSS プロパティを DOM に追加せずに解析済み要素に適用する方法

Question

これを行う一般的な方法は、新しい要素を本文に追加してから、次の jQuery スクリプトのように計算された css 値を取得することです。

    var $body = $('body');
    var $this =  $(this);
    var $text = $this.text();
    if($text=='') $text = $this.val();
    var calc = '<div style="clear:both;display:block;visibility:hidden;"><span style="width:inherit;margin:0;font-family:'  + $this.css('font-family') + ';font-size:'  + $this.css('font-size') + ';font-weight:' + $this.css('font-weight') + '">' + $text + '</span></div>';
    $body.append(calc);
    var width = $body.find('span:last').width();
    $body.find('span:last').parent().remove();
    return width;     

問題は、再レンダリングが遅くなるのを避けるために、DOM に追加せずにそれを行う方法です。このスクリプトは、DOM に追加せずにそれを行います。

    var fakeInputText = '<div style="clear:both;display:block;"><span style="width:inherit;margin:0;font-family:Helvetica Neue, Helvetica, Arial, sans-serif;font-size:22px;font-weight:400"></span></div>';
    var parser = new DOMParser();
    var doc = parser.parseFromString(fakeInputText, "text/html");


    var style = document.defaultView.getComputedStyle(doc.getElementsByTagName("div")[0]); //doc.querySelector("span")
    console.log(style);

そして、これが得られるものです：