有效測試DOM元素offsetHeight＆offsetWidth，無需附加

我需要測試元素的offsetWidth和offsetHeight。目前，元素被附加，然後測試offsetWidth和Height，之後元素被移除。有效測試DOM元素offsetHeight＆offsetWidth，無需附加

它看起來像這樣：

var sizer = document.createElement('DIV'); 
sizer.innerHTML = element; //element is a string 
document.body.appendChild(sizer); 
if (sizer.offsetWidth > maxWidth) { 
    sizer.style.width = maxWidth); 
} 
document.body.removeChild(sizer);

但是，這是很慢！

編輯：完整代碼：

InfoBubble.prototype.getElementSize_ = function (element, opt_maxWidth, opt_maxHeight) { 
var sizer = document.createElement('DIV'); 
sizer.style.display = 'inline'; 
sizer.style.position = 'absolute'; 
sizer.style.visibility = 'hidden'; 

if (typeof element == 'string') { 
    sizer.innerHTML = element; 
} else { 
    sizer.appendChild(element.cloneNode(true)); 
} 

document.body.appendChild(sizer); 

// If the width is bigger than the max width then set the width and size again 
if (opt_maxWidth && sizer.offsetWidth > opt_maxWidth) { 
    sizer.style.width = this.px(opt_maxWidth); 
    //size = new google.maps.Size(sizer.offsetWidth, sizer.offsetHeight); 
} 

// If the height is bigger than the max height then set the height and size 
// again 
if (opt_maxHeight && sizer.offsetHeight > opt_maxHeight) { 
    sizer.style.height = this.px(opt_maxHeight); 
    //size = new google.maps.Size(sizer.offsetWidth, sizer.offsetHeight); 
} 
var size = new google.maps.Size(sizer.offsetWidth, sizer.offsetHeight); 

document.body.removeChild(sizer); 
return size; 
};

來源

2011-09-01 hrdwdmrbl

整個頁面可能是redrawn- 放在一個是絕對定位，可見性隱藏div元素的東西，它應該會更快。

來源

2011-09-01 03:15:43 kennebec

因爲我不相信它是相關信息，但在插入之前，元素是隱藏的風格並具有絕對位置。 sizer.style.display ='inline'; sizer.style.position ='絕對'; sizer.style.visibility ='hidden'; 它仍然非常慢，尤其是因爲它發生了一點點。 – hrdwdmrbl

我認爲你不能這麼做，因爲真正的元素大小取決於它的祖先元素。

來源

2011-09-01 03:51:59

即使沒有很高的精度，你是否對如何完成相同的任務有任何建議？這段代碼實際上並不是我自己的，而是來自我正在使用的庫。目前正在拖動我的整個應用程序。如果我找不到解決方案，我只需要把它完全拋棄。謝謝你的幫助。 – hrdwdmrbl

有效測試DOM元素offsetHeight＆offsetWidth，無需附加

回答

相關問題