jQuery API之width、innerWidth、outWidth的使用

width

• 参数：
  • number: 宽度大小
  • string: 带单位的宽度大小
• 作用：
  1. 获取jQ对象content宽度
  2. 设置jQ对象content宽度
• code：

.wrapper {
    position: absolute;
    width: 200px;
    height: 200px;
    background-color: orange;
}
复制代码

 <div class="wrapper"></div>
复制代码

// 获取wrapper content区的宽度
console.log($('.wrapper').width()); // 执行结果：输出200

// 设置wrapper content区的宽度
$('.wrapper').width(100);
$('.wrapper').width('100px');
复制代码

innerWidth

• 作用：
  1. 获取jQ对象content + padding宽度
• code：

.wrapper {
    width: 200px;
    height: 200px;
    padding: 10px;
    background-color: orange;
}
复制代码

<div class="wrapper"></div>
复制代码

// 获取wrapper content + padding的宽度
console.log($('.wrapper').innerWidthWidth()); // 执行结果：输出220
复制代码

outWidth

• 参数：
  • boolean: 是否包含margin
• 作用：
  1. 获取jQ对象content + padding + border宽度
• 说明：
  1. 当传入参数为true时，返回宽度为content + padding + border + margin的总和
• code：

.wrapper {
    width: 200px;
    height: 200px;
    padding: 10px;
    border: 5px solid red;
    margin: 10px;
    background-color: orange;
}
复制代码

<div class="wrapper"></div>
复制代码

 // 获取outWidth
 console.log($('.wrapper').outerWidth()) // 执行结果： 输出230
 console.log($('.wrapper').outerWidth(true)) // 执行结果：输出250
复制代码