回答
关键是要显示元素(显示:块),但也隐藏(visibility:hidden的),并设置它的位置,绝对的,使其不影响页面流。
MooTools Element.Measure类做到了这一点,就像奥斯卡提到的那样。
这是不可能的,至少不准确的,因为造型影响了这些特性,并在它的投入决定了它的风格和规则的影响它是什么。
例如在页面中放置一个<p></p>
默认为身体的宽度(如果作为孩子添加到它的话),但是如果您将其附加在例如<div style="width: 100px;"></div>
的内部,那么您会看到如何快速改变事物。
你可以用MooTools做什么就是使用Element.Measure类 - 意思是说,你将元素注入到DOM中,但保持隐藏。现在,您可以在没有实际显示的情况下测量元素。
+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
- 1. 将元素附加到DOM之前排版MathJax
- 2. 在添加到DOM之前获取元素的高度
- 3. python元素不再附加到dom硒
- 4. 将数据附加到DOM元素
- 5. Selenium - 元素不再附加到DOM - Python
- 6. Jasmine - 无法将元素附加到DOM
- 7. 元素不再附加到DOM - 为Button
- 8. 获取DOM元素的宽度?
- 9. 将DOM元素附加到本地dom不适用样式
- 10. 附加到DOM
- 11. 获取元素的宽度并不追加到Dom
- 12. DOM元素的新附加方法?
- 13. 创建附加jQuery的DOM元素
- 14. 在将其附加到AngularJS中的DOM之前预处理每个HTML元素
- 15. 如何将DOM元素附加到JavaScript中的空元素中?
- 16. 在DOM文档的DOM中附加元素子文件
- 17. 元素的大小之前它被添加到DOM
- 18. 附加DOM元素两次(jQuery)
- 19. HTML/CSS/JS:在将元素的大小附加到DOM树之前是否可以找到元素的大小?
- 20. 如何在添加到DOM之前获取元素?
- 21. jQuery在追加到DOM之前使元素变量为零
- 22. 添加到DOM的元素在jQuery中没有宽度或高度?
- 23. DOM加载之前填充元标记
- 24. AngularJS - 附加元素,以指定的DOM元素
- 25. 在元素加载之前在DOM中添加事件
- 26. PHP的HTML DOM解析 - 无法找到附加的元素javascript
- 27. jQuery附加DOM
- 28. 获取宽度和元素的高度DOM外JS
- 29. 在将新元素添加到DOM之后,使用jQuery来附加行为?
- 30. 在CSS之前加载DOM?
1,用另外的:元件将直到当前的JavaScript执行停止实际上不被呈现。这意味着您可以追加,获取尺寸并再次移除,而不会有任何可视的迹象表明发生了任何事情。 – 2010-05-27 13:21:30