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

诀窍是显示元素(display:block),同时隐藏它(visibility:hidden),并将它的位置设置为绝对位置,这样它就不会影响页面流。

正如Oscar提到的,moooltools元素.measure类可以做到这一点。

Oscar提到的mootools元素.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() } )

使用moootools所能做的就是使用element.measure类,也就是说,将元素注入到dom中,但要将其隐藏。现在,您可以测量元素而不实际显示它。

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

这是不可能的,至少是不准确的,因为样式会影响这些属性,它的放置位置决定了它是如何设置样式的,以及什么规则会影响它。

例如放置 <p></p> 在页面中,如果作为子级附加到正文,则默认为正文的宽度,但如果您在其中附加了正文,例如a <div style="width: 100px;"></div> 然后你就会看到它是如何快速改变事物的。

修改了一点代码。下面是一个纯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