width(),innerHTML(),outerHTML()

HTML代碼：

<div id="box">
    <p>哈哈，隨便寫點內容</p>
    <p>刪除的實例</p>
    <p>蠻試試看</p>
</div>
<button id="btn">點擊</button>

CSS：

#box {
    border: 1px solid #ccc;
    background: #fefefe;
    width: 400px;
    height: 200px;
    padding: 10px;
    margin: 10px;
}

1.width(),height()

// width

$('#box').width();    // 400
$('#box').height();    // 200

2.innerWidth(),innerHeight()

// width + padding

$('#box').innerWidth();   // 420
$('#box').innerHeight();  // 220

3.outerWidth(),outerHeight()

// width + padding + border

$('#box').outerWidth();    // 422
$('#box').outerHeight();    // 222

// width + padding + border + margin

$('#box').outerWidth(true);    // 442
$('#box').outerHeight(true);    // 242

注意： 當outerWidth(true)，outerHeight(true)參數true時，

outerWidth(true) 方法返回元素的寬度（包括內邊距、邊框和外邊距）。

outerHeight(true) 方法返回元素的高度（包括內邊距、邊框和外邊距）。