jquery指定具有屬性border-size的元素的錯誤高度：border-box

Question

我有一個具有任意高度的元素。 元素具有屬性框大小：邊框。 如果使用jquery指定100px的高度，結果將是元素的高度等於120. 有什麼可能是錯誤的？

JS：

$('#element').height(100); 

CSS：

#element{ 
    background-color: green; 
    height: 50px; 
    width: 300px; 
    padding: 10px; 
    box-sizing: border-box; 
} 

https://jsfiddle.net/yurri_87/8sLovkba/

Answer 1

height()功能只設置元素的高度，如果你要設置總高度包括填充，邊框和邊距作爲100然後使用outerHeight()

$('#element').outerHeight(100); 

使用height()您強制jQuery來設置元素本身的高度爲100，這就是爲什麼即使你使用box-sizing: border-box，它不會有任何區別。

更多參考： http://api.jquery.com/outerheight/

我希望它能幫助