jQuery：border()用于边框

发布时间：2020-12-14 22:36:13 所属栏目：资源来源：网络整理

导读：它在jQuery API中说明： Note that .height() will always return the content height,regardless of the value of the CSS box-sizing property. As of jQuery 1.8,this may require retrieving the CSS height plus box-sizing property and then subtract

它在jQuery API中说明：

Note that .height() will always return the content height,regardless
of the value of the CSS box-sizing property. As of jQuery 1.8,this
may require retrieving the CSS height plus box-sizing property and
then subtracting any potential border and padding on each element when
the element has box-sizing: border-box. To avoid this penalty,use
.css( “height” ) rather than .height().

我尝试了以下示例


用CSS

.boxA{
  padding: 20px;
  background-color: yellow;
  box-sizing: border-box;
  margin: 50px;
}

.boxB{
  height: 50px;
  background-color: red;
}

根据jQUery API,我确信

$('#wrapper').height($('#wrapper').height());

将boxA的高度设置为50px(因为内容高度为50px),但我发现高度设置为90px.
但是,如果我使用

$('#wrapper').css('height',$('#wrapper').height()+"px");

boxA的高度为50px,因此缩小.为什么第一种方法也不能产生50px的高度？
此外,命令

$('#wrapper').height($('#wrapper').css('height'));

将boxA的高度设置为130px但$(‘#wrapper’).css(‘height’)返回90.这里发生了什么？
您可以在jFiddle中找到这些示例.


最佳答案
看起来.height()总是通过内容框来衡量,但是在应用新值时它会考虑大小调整大小,因此它会将测量的内容框值添加到其余设置中,因为框已经设置了边框.
如果你在demo中将box-sizing更改为content-box,它的行为将完全相同(在所有情况下都会将50px设置为每个框,并且对于content-box值,所有框都将具有90px).
                        （编辑：李大同）
【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!