尺寸方法

在jQuery中，尺寸方法用来获取或设置元素的宽度和高度。例如，通过width()方法可以获取元素的宽度，如果在参数中传入一个值（可以不写单位），则是设置元素宽度。

常用的尺寸方法如表1所示。

表1 尺寸方法

需要注意的是，表1列举的这些方法的返回值都是数字型。

下面通过代码演示尺寸方法的使用。先准备一个页面结构，具体代码如下。

 1  <style>
 2   div {
 3    width: 200px;
 4    height: 200px;
 5    background-color: pink;
 6    padding: 10px;
 7    border: 15px solid red;
 8    margin: 20px;
 9   }
 10 </style>
 11 <div></div>

上述代码中，第2~9行定义div元素的样式，第11行定义div元素结构。

接下来，使用尺寸方法完成元素尺寸的获取，具体代码如下。

 1  <script>
 2   // width()获取宽度
 3   console.log($("div").width());       // 输出结果：200px
 4   // innerWidth()获取宽度
 5   console.log($("div").innerWidth());   // 输出结果：220px
 6   // outerWidth()获取宽度
 7   console.log($("div").outerWidth());   // 输出结果：250px
 8   // outerWidth(true)获取宽度
 9   console.log($("div").outerWidth(true)); // 输出结果：290px
 10  // width()设置宽度
 11  $("div").width(300);            // 设置宽度为300px
 12 </script>

上述代码中，第3行获取元素宽度为200px；第5行获取的宽度包括内边距padding的大小；第7行获取的宽度包括padding和border的大小；第9行获取的宽度包括padding、border和margin的大小；第11行设置元素宽度300px。