jquery 使用属性 border-size : border-box 指定元素的错误高度

Question

我有一个任意高度的元素。 元素具有属性 box-sizing: border-box。 如果使用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/

希望有帮助