width(),innerHTML(),outerHTML()
Posted 菜菜小言
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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) 方法返回元素的高度(包括内边距、边框和外边距)。
以上是关于width(),innerHTML(),outerHTML()的主要内容,如果未能解决你的问题,请参考以下文章
JS中使用innerHTML和createElement方式动态创建元素
某些 Google 字体不适用于 iFrame innerHTML