jQuery的：身高（）的邊界框

它在jQuery API說：jQuery的：身高（）的邊界框

注意.height（）將始終返回內容的高度，無論了CSS的價值箱上漿屬性。從jQuery 1.8開始，這個可能需要檢索CSS高度加上框尺寸屬性，然後然後在元素具有框尺寸：border-box時減去每個元素上的任何潛在邊框和填充。爲避免這種損失，請使用 .css（「height」）而不是.height（）。

我嘗試下面的例子

<div id='wrapper' class='boxA'> 
    <div class='boxB'> 
    Test 
    </div> 
</div>

與CSS

.boxA{ 
    padding: 20px; 
    background-color: yellow; 
    box-sizing: border-box; 
    margin: 50px; 
} 

.boxB{ 
    height: 50px; 
    background-color: red; 
}

據jQuery的API我確信

$('#wrapper').height($('#wrapper').height());

將設置BOXA的高度到50px（因爲內容高度是50px），但我創建d表示高度設置爲90px。但是，如果我用

$('#wrapper').css('height', $('#wrapper').height()+"px");

BOXA的高度得到50像素，因此收縮。爲什麼第一種方法不能生成50像素的高度？

此外，命令

$('#wrapper').height($('#wrapper').css('height'));

將BOXA的高度設置爲130px，但$('#wrapper').css('height')回報90.這裏發生了什麼？

你可以在這個jFiddle找到這些例子。

來源

2016-04-12 Adam

_「...從jQuery 1.8開始，這可能需要檢索CSS height和box-sizing屬性，然後**減去每個元素上任何潛在的border和padding，尺寸：邊框。「_ – Vucko

@ Vucko我現在添加了全部評論。它仍然沒有向我解釋我的帖子中描述的怪異行爲。 – Adam

jQuery的API說

注意.height（）將始終返回內容的高度，無論 CSS框大小調整屬性的值。

這意味着$('#wrapper').height()爲50像素（因爲BOXA的內容高度爲50像素），並$('#wrapper').css('height')爲90像素（因爲你有20像素的頂部填充和20像素的底部填充）爲border-box的和高度由content-height + padding + border給出。此外，API指出

請注意，無論是CSS box-sizing屬性的值，高度（值）都會設置框的內容高度。

因此，如果使用

$('#wrapper').height($('#wrapper').height());

則內容高度將被設置爲50像素，但因爲你有一個border-box這意味着height=90px，因爲高度是內容的高度+墊+邊框（添加兩次20px的填充）。

這也適用於第二個實施例

$('#wrapper').height($('#wrapper').css('height'));

，以便將內容改變高度90像素，您的border-box的總高度必須是90像素20像素的+ + 20像素= 130px。

因此，一切都很好。

來源

2016-04-13 05:49:54 Adam

貌似.height()總是被content-box衡量的，而是運用新的價值時，它尊重box-sizing，所以它增加測量content-box值的設置，其餘部分都箱border-box成立。

如果您在演示改變box-sizing到content-box，它的行爲完全一樣，（在所有情形下設置50px每個盒子，並與content-box值所有箱子都會有90像素）。

來源

2016-04-12 20:52:20

jQuery的：身高（）的邊界框

回答

相關問題