附加到DOM之前的DOM元素宽度

问题描述：

我确定答案是否定的，但是可以在之前确定元素的宽度它被附加到DOM？附加到DOM之前的DOM元素宽度

一旦它被追加，我知道我可以使用offsetWidth和offsetHeight。

感谢

答

关键是要显示元素（显示：块），但也隐藏（visibility：hidden的），并设置它的位置，绝对的，使其不影响页面流。

MooTools Element.Measure类做到了这一点，就像奥斯卡提到的那样。

答

这是不可能的，至少不准确的，因为造型影响了这些特性，并在它的投入决定了它的风格和规则的影响它是什么。

例如在页面中放置一个<p></p>默认为身体的宽度（如果作为孩子添加到它的话），但是如果您将其附加在例如<div style="width: 100px;"></div>的内部，那么您会看到如何快速改变事物。

1，用另外的：元件将直到当前的JavaScript执行停止实际上不被呈现。这意味着您可以追加，获取尺寸并再次移除，而不会有任何可视的迹象表明发生了任何事情。 – 2010-05-27 13:21:30

答

你可以用MooTools做什么就是使用Element.Measure类 - 意思是说，你将元素注入到DOM中，但保持隐藏。现在，您可以在没有实际显示的情况下测量元素。

http://mootools.net/docs/more/Element/Element.Measure

+1尼斯，另一个不错的MooTools宝石。谢谢。 – Steve 2010-05-28 12:27:14

答

奥斯卡提到的Mootools Element.Measure功能非常棒。对于那些使用jQuery，这里有一个快速的插件，完成同样的事情：（！感谢萨姆·芬指出了这一点）

$.fn.measure = (fn)-> 
    el = $(this).clone(false) 
    el.css 
    visibility: 'hidden' 
    position: 'absolute' 
    el.appendTo('body') 
    result = fn.apply(el) 
    el.remove() 
    return result

你可以这样调用，确保返回值：

width = $('.my-class-name').measure(function(){ return this.width() })

我知道这是很久以前发布的，但对于像我这样尝试应用这个的人，您需要*返回*您传入的函数中的值。因此'width = $（'。my-class-name '）.measure（function（）{return this.width（）}）' – 2013-03-05 18:03:25

更新了它 - 谢谢@SamFen。 :) – jpadvo 2013-03-06 05:11:45

伟大的东西。目前使用它与RequireJS - https://gist.github.com/simonsmith/5135933 – 2013-03-11 17:24:43

答

修改了一下代码。这里是一个纯JS溶液：

function measure(el, fn) { 
 
    var pV = el.style.visibility, 
 
     pP = el.style.position; 
 
     
 
    el.style.visibility = 'hidden'; 
 
    el.style.position = 'absolute'; 
 
    
 
    document.body.appendChild(el); 
 
    var result = fn(el); 
 
    el.parentNode.removeChild(el); 
 
    
 
    el.style.visibility = pV; 
 
    el.style.position = pP; 
 
    return result; 
 
} 
 

 
var div = document.createElement('div'); 
 
div.innerHTML = "<p>Hello</p><br/>"; 
 

 
alert(div.offsetHeight); // 0 
 

 
alert(measure(div, function(el){return el.offsetHeight})); // 68

附加到DOM之前的DOM元素宽度

相关推荐