jQuery中的height innerHeight outerHeight区别示例介绍

前端技术 2023/09/04 JavaScript
标准浏览器下：

height:高度

innerHeight:高度＋补白
outerHeight:高度＋补白＋边框，参数为true时：高度＋补白＋边框＋边距

html代码：
复制代码 代码如下:

<div class=\"width: 150px;height:20px;float: left;border: 2px solid red;margin: 10px;margin: 10px;padding: 10px;\" id=\"test\">jjjjj</div>

js代码：
复制代码 代码如下:

alert($(\"#test\").height());
alert($(\"#test\").innerHeight());
alert($(\"#test\").outerHeight());
alert($(\"#test\").outerHeight(true));

结果：
在ie中的结果：17px，37px，41px，61px
在ff中的结果：20px，40px，44px，64px

html代码：
复制代码 代码如下:

<div class=\"width: 150px;height: 41px;float: left;border: 2px solid red;margin: 10px;margin: 10px;padding: 10px;\" id=\"test\">jjjjj</div>

js代码：
复制代码 代码如下:

alert($(\"#test\").height());
alert($(\"#test\").innerHeight());
alert($(\"#test\").outerHeight());
alert($(\"#test\").outerHeight(true));
[html]
结果：
在ie中的结果：17px，37px，41px，61px
在ff中的结果：41px，61px，65px，85px

html代码：
[code]
<div class=\"width: 150px;height: 42px;float: left;border: 2px solid red;margin: 10px;margin: 10px;padding: 10px;\" id=\"test\">jjjjj</div>

js代码：
复制代码 代码如下:

alert($(\"#test\").height());
alert($(\"#test\").innerHeight());
alert($(\"#test\").outerHeight());
alert($(\"#test\").outerHeight(true));

结果：
在ie中的结果：18px，38px，42px，62px
在ff中的结果：42px，62px，66px，86px

html代码：
复制代码 代码如下:

<div class=\"width: 150px;height: 60px;float: left;border: 2px solid red;margin: 10px;margin: 10px;padding: 10px;\" id=\"test\">jjjjj</div>

js代码：
复制代码 代码如下:

alert($(\"#test\").height());
alert($(\"#test\").innerHeight());
alert($(\"#test\").outerHeight());
alert($(\"#test\").outerHeight(true));

结果：
在ie中的结果：36px，56px，60px，80px
在ff中的结果：60px，80px，84px，104px

结论：在ie中height包含border和padding并且height最小值为17px ，同理可得width，不过它最小值为15px

本文地址：https://www.stayed.cn/item/9084

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案