width():
不包括元素的外边距(margin)、内边距(padding)、边框(border)等部分的宽度。
innerWidth():
包括元素的内边距(padding)，但不包括外边距(margin)、边框(border)等部分的宽度。
outerWidth():
包括元素的内边距(padding)、边框(border)，但不包括外边距(margin)部分的宽度。你也可以指定参数为true，以包括外边距(margin)部分的宽度。
1 <body> 2 <div class="box"></div> 3 </body>
1 <style>
2 .box{ width: 100px;height: 100px;background-color: red; }
3 </style>
1 <script>
2 $(function () {
3 //无边距
4 console.log("width",$(".box").width());//100px
5 console.log("innerWid", $(".box").innerWidth());//100px
6 console.log("outerWid",$(".box").outerWidth());//100px
7 //加padding 10px;
8 $(".box").css("padding", "10px");
9 console.log("width", $(".box").width());//100px
10 console.log("innerWid", $(".box").innerWidth());//120px
11 console.log("outerWid", $(".box").outerWidth());//120px
12 //加border 5px
13 $(".box").css("border", "5px solid orange");
14 console.log("width", $(".box").width());//100px
15 console.log("innerWid", $(".box").innerWidth());//120px
16 console.log("outerWid", $(".box").outerWidth());//130px
17 //加margin 10px
18 $(".box").css("margin", "10px");
19 console.log("width", $(".box").width());//100px
20 console.log("innerWid", $(".box").innerWidth());//120px
21 console.log("outerWid", $(".box").outerWidth());//130px
22 console.log("outerWid", $(".box").outerWidth(true));//150px
23 })
24 </script>
时间： 2024-10-12 06:10:45