Как применять свойства CSS документа к элементу разобраны без добавления его в DOM

Question

Распространенный способ сделать это, чтобы добавление нового элемента к телу, а затем получить вычисленные значения CSS, как в этом сценарии JQuery:

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;  

Te вопрос заключается в том, чтобы сделать это, не добавляя его в 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); 

И это то, что он получает:

Answer 1

Вы можете создать элемент jQuery, не добавляя его в DOM.

var $yourCachedElement = $("<div>", { // Create your element 
    style: "your styling", 
    html: "html code to store inside this element" 
}), 
widthYouWannGet = $yourCachedElement.width(); // Store element's width into the var