常用的方法是将新元素附加到正文,然后获取计算的 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;
问题是如何在不将其附加到 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);
这就是它得到的:
最佳答案
您可以创建一个 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
关于javascript - 如何将文档 CSS 属性应用于已解析的元素而不将其附加到 DOM,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28487226/