Попробуйте получить фактическую ширину и высоту элемента с помощью jQuery

Question

Я пытаюсь получить ширину & Высота элемента с jQuery. Теперь у меня есть функция, которая обертывает span вокруг элемента и получает размер от временного элемента 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; 
} 

An (не) рабочий пример: http://jsfiddle.net/KmeaC/1/

Единственный способ получить фактическую ширину & высоту "Привет мир", чтобы удалить теги div вокруг него: http://jsfiddle.net/ycxTr/. Но это не то, что я хочу :)

Кто-нибудь?

Answer 1

EDITED ОТВЕТ

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; 
}