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

我試圖使用jQuery獲取寬度&元素的高度。現在我有一個函數可以在元素周圍展開一個跨度，並從臨時span元素中獲取大小。嘗試使用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>

$('#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/。但那不是我想要的:)

有人嗎？

來源

2013-06-30 Pieter

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

來源

2013-06-30 15:17:14

因爲我想元素內的HTML的寬度/高度。使用您的解決方案，我可以獲得元素本身的大小，而不是其中的內容：http://jsfiddle.net/qJ6BZ/ – Pieter

查看已更新的答案，但當然這將返回與容器相同的尺寸作爲DIV將寬度和高度調整爲其大小內容除了某些CSS規則應用爲填充/邊框/等等...如果仍然不能按照您的預期工作，請考慮在此情況下指出您期望的內容的大小 –

是的！謝謝烤，它工作得很好！ – Pieter

當你複製一個隱藏的元素它的大小是零。只是取消隱藏它的計算：

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

來源

2013-06-30 15:22:20

感謝Martin的回覆，但它仍然無法正常工作：http://jsfiddle.net/psqM9/或者我在這裏做錯了什麼？ – Pieter

我剛剛在計算之前添加了.show（），並在* .hide（）之後，看看http://jsfiddle.net/psqM9/1/ –

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

回答

相關問題