Javascript 如何将文档CSS属性应用于已解析的元素而不将其附加到DOM

通常的方法是将新元素附加到主体中，然后获得计算出的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;     

var$body=$（'body'）；
var$this=$（this）；
var$text=$this.text（）；
如果（$text=''）$text=$this.val（）；
变量计算=''+$text+''；
$body.append（计算）；
var width=$body.find（'span:last'）.width（）；
$body.find（'span:last'）.parent（）.remove（）；
返回宽度；

问题是如何在不将其附加到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);

var fakeInputText=''；
var parser=新的DOMParser（）；
var doc=parser.parseFromString（fakeInputText，“text/html”）；
var style=document.defaultView.getComputedStyle（doc.getElementsByTagName（“div”）[0]）//文档查询选择器（“span”）
console.log（风格）；

这就是它得到的：

---

您可以创建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

var$yourCachedElement=$（“”，{//创建元素
风格：“你的风格”，
html：“存储在此元素中的html代码”
}),
WidthYouWanget=$yourCachedElement.width（）；//将元素的宽度存储到变量中