jquery - 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/

我希望它有帮助