width(),innerHTML(),outerHTML()

Posted 2020-07-11 菜菜小言

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) 方法返回元素的高度（包括内边距、边框和外边距）。