jQuery中的height innerHeight outerHeight区别示例介绍
2014-06-15 17:24
567 查看
标准浏览器下:
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
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
您可能感兴趣的文章:
相关文章推荐
- JQuery操作select下拉列表框
- JQuery练习demo1(隔行变色)
- 十个jQuery图片画廊插件推荐
- jquery checkbox,radio是否选中的判断代码
- jquery 选择器应用
- Js/Jquery:获取iframe中的元素+在Iframe中获取父窗体的元素方法
- jQuery的Select操作集合
- Jqgrid and Jquery
- jquery与ajax的应用
- jQuery判断邮箱
- jQueryDom操作之创建节点
- 说说JSON和JSONP,也许你会豁然开朗,含jQuery用例
- jQuery 入门教程(32): jQuery UI Datepicker 示例(五)
- Jqueryui+easyui+easywidgets做的后台界面
- 自写日期年月日三级联动效果jquery插件
- jquery easyui datagrid detailview groupview添加自定义视图view
- jQuery1.6.1源码分析
- 使用jquery获取url以及使用jquery获取url参数以及中文编码乱码的问题
- 详细介绍jQuery.outerWidth() 函数具体用法
- Qrcode生成二维码(logo篇)之jquery.qrcode.min.js