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;
}

Answer 1

height()函数只设置元素的高度，如果你想设置总高度包括padding，border和margin为100然后使用outerHeight()

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

通过使用 height()，您会强制 jQuery 将元素本身的高度设置为 100，这就是为什么即使您使用 box-sizing: border-box，它也不会有任何区别。

希望对你有帮助

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