尝试使用jQuery获取元素的实际宽度和高度

Question

我试图使用jQuery获取宽度&元素的高度。现在我有一个函数可以在元素周围展开一个跨度，并从临时span元素中获取大小。

HTML

<a id="test">click</a><br /> 
<div id="content" style="display:block"> 
    <div>Hello world</div> 
</div> 

<h3>Result:</h3> 
<div id="result"></div> 

JS

$('#test').click (function() { 

    var size = elementSize ('#content'); 
    $('#result').html (size.width + ' x ' + size.height + ' px'); 
}); 

function elementSize (elementId) { 

    var html_org = $(elementId).html(); 
    var html_calc = '<span>' + html_org + '</span>'; 
    $(elementId).html(html_calc); 

    var ret = { 
     width: $(elementId).find('span:first').width(), 
     height: $(elementId).find('span:first').height(), 
    }; 

    $(elementId).html(html_org); 

    return ret; 
} 

的（不）工作示例：http://jsfiddle.net/KmeaC/1/

得到的 “Hello world” 的实际宽度&高度的唯一方法是删除它的div标签：http://jsfiddle.net/ycxTr/。但那不是我想要的:)

有人吗？

Answer 1

EDITED ANSWER

DEMO

$('#test').click(function() { 

    var size = elementSize('#content'); 
    $('#result').html(size.width + ' x ' + size.height + 'px'); 
}); 

function elementSize(elementId) { 

    var html_org = $(elementId).html(); 
    var $html_calc = $('<span>' + html_org + '</span>').css({ 
     position: 'absolute', 
     top: -9999, 
     left: -9999 
    }).appendTo('body'); 



    var ret = { 
     width: $html_calc.width(), 
     height: $html_calc.height(), 
    }; 
    $html_calc.remove(); 

    return ret; 
} 

Answer 2

当你复制一个隐藏的元素它的大小是零。只是取消隐藏它的计算：

function elementSize (elementId) { 
    ... 
    $(elementId).html(html_calc).show();  
    var ret = { 
     ... 
    };  
    $(elementId).html(html_calc).hide();  
    ...  
    return ret; 
}