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/

我希望它能帮助