JQ中的width()，height(),innerwidth(),innerheight(),outerwidth(),outheight()的区别

àì夳堔傛蜴生んèń 2022-06-02 23:47 98阅读 0赞

一直以来都对jq的  
width()，  
height(),  
innerwidth(),  
innerheight(),  
outerwidth(),  
outheight()  
有着困惑，并且老是记不住，所以这次就特意找个时间来研究他们的区别，也做一个总结，方便下次查阅：

<div class="box" id="box">
 
 </div>
 width:
 height:
 innerwidth:
 innerheight:
 outwidth:
 outheight:
 <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和边框）