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

Question

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

一旦附加,我知道我可以使用offsetWidth和offsetHeight.

谢谢

Answer 1

诀窍是显示元素(显示:块),但也隐藏它(可见性:隐藏)并将其位置设置为绝对,以便它不会影响页面流.

正如奥斯卡所提到的,MooTools Element.Measure类就是这样做的.

Answer 2

Oscar提到的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

你可以像这样调用它,确保返回值(感谢Sam Fen指出它!):

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

Answer 3

稍微修改了一下代码。这是一个纯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

Answer 4

你可以用MooTools做的是使用Element.Measure类 - 意思是,你将元素注入DOM,但保持隐藏.现在,您可以在不实际显示元素的情况下测量元素.

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

Answer 5

至少不准确,这是不可能的,因为样式会影响这些属性,它的位置决定了它的样式以及影响它的规则.

例如<p></p>,在页面中放置a 将默认为身体的宽度(如果作为子项附加到其中),但是如果您将其添加到内部(例如a)<div style="width: 100px;"></div>,那么您将看到如何快速更改内容.