一直以来都对jq的
width(),
height(),
innerwidth(),
innerheight(),
outerwidth(),
outheight()
有着困惑,并且老是记不住,所以这次就特意找个时间来研究他们的区别,也做一个总结,方便下次查阅:
<div class="box" id="box">
</div>
<p><span>width:</span><span id="width"></span></p>
<p ><span>height:</span><span id="height"></span></p>
<p ><span>innerwidth:</span><span id="innerwidth"></span></p>
<p ><span>innerheight:</span><span id="innerheight"></span></p>
<p ><span>outwidth:</span><span id="outwidth"></span></p>
<p ><span>outheight:</span><span id="outheight"></span></p>
<script src="jquery-3.1.1.min.js"></script>
<script type="text/javascript">
$(function () {
var width = $("#width"),
height = $("#height"),
innerwidht = $("#innerwidth"),
innerheight = $("#innerheight"),
outwidth = $("#outwidth"),
outheight = $("#outheight");
var box_width = $("#box").width(),//盒子模型中里面content的css设置的宽度(不包括padding和margin)
box_height = $("#box").height(),//盒子模型中里面content的css设置的高度(不包括padding和margin)
box_innerwidth = $("#box").innerWidth(),//盒子模型中里面content的css设置的宽度加上padding(包括padding)
box_innerheight = $("#box").innerHeight(),//盒子模型中里面content的css设置的高度加上padding(包括padding)
box_outwidth = $("#box").outerWidth(),//盒子模型中里面content的css设置的宽度加上padding(包括padding和边框)
box_outerheight = $("#box").outerHeight();//盒子模型中里面content的css设置的高度加上padding(包括padding和边框)
width.text(box_width);
height.text(box_height);
innerwidht.text(box_innerwidth);
innerheight.text(box_innerheight);
outwidth.text(box_outwidth);
outheight.text(box_outerheight);
})
</script>
box的css样式:
*{
margin: 0;
padding: 0;
}
.box{
width: 500px;
height: 600px;
background-color: #0d3349;
border:2px solid #0db50c;
padding: 10px;
margin: 20px;
}
运行结果:
width:500
height:600
innerwidth:520
innerheight:620
outwidth:524
outheight:624
由这个结果可以得知,
width和height的结果值就是box的css的width和height的值;
而innerwidth和innerheight的结果则是box盒子的css的width和height加上paddind值,即innerwidth=500+10*2=520,innerheight=500+10*2=520;
而outerwidth和outerheight的值则是css的width和height再加上padding和border,即outerwidth=500+10*2+2*2=524,outerheight=500+10*2+2*2=524;
总结:
width()//盒子模型中里面content的css设置的宽度(不包括padding和margin)
height()//盒子模型中里面content的css设置的高度(不包括padding和margin)
innerWidth()//盒子模型中里面content的css设置的宽度加上padding(包括padding)
innerHeight()//盒子模型中里面content的css设置的高度加上padding(包括padding)
outerWidth(),//盒子模型中里面content的css设置的宽度加上padding(包括padding和边框)
outerHeight()//盒子模型中里面content的css设置的高度加上padding(包括padding和边框)