嘗試使用jQuery獲取元素的實際寬度和高度

Question

我正在嘗試使用jQuery獲取元素的寬度和高度。 現在，我有一個函數，可將跨度環繞在元素上，並從臨時跨度元素獲取大小。

的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

編輯答案

演示

$('#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;
}