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
複製代碼