码迷,mamicode.com
首页 > Web开发 > 详细

width(),innerHTML(),outerHTML()

时间:2016-05-24 11:53:00      阅读:182      评论:0      收藏:0      [点我收藏+]

标签:

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

  

width(),innerHTML(),outerHTML()

标签:

原文地址:http://www.cnblogs.com/yanzp/p/5522791.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!