jQuery中height()、innerheight()、outerheight()的区别
类别:Web前端 浏览量:735
时间:2016-3-30 jQuery中height()、innerheight()、outerheight()的区别
jQuery中height()、innerheight()、outerheight()的区别一、jQuery 中 height()
获取匹配元素集合中的第一个元素的当前计算高度值,总是返回内容宽度
二、jQuery 中 innerheight()
包括padding,但是不包括border,即: height + padding
三、jQuery 中 outerheight()
包括padding,border,即:height + padding + border
四、jQuery 中 outerheight(true)
包括padding,border和margin,即: height + padding + border + margin
五、height()、innerheight()、outerheight()的实例
<li id="element" style="margin:5px; padding:10px; width:100px; height:100px; border:1px solid #000;"></li>
<script type="text/javascript">
var $ele = $("#element");
// height() = height(100) = 100
document.writeln($ele.height()); // 100
// innerHeight() = height(100) + padding(10*2)= 120
document.writeln($ele.innerHeight()); // 120
// outerHeight() = height(100) + padding(10*2) + border(1*2) = 122
document.writeln($ele.outerHeight()); // 122
// outerHeight(true) = height(100) + padding(10*2) + border(1*2) + margin(5*2) = 132
document.writeln($ele.outerHeight(true)); // 132
</script>
标签:jquery
您可能感兴趣
- jquery next()
- jquerycss3轮播案例(CSS3实现列表无限滚动/轮播效果)
- jQuery end()
- jquery ajax的async使用
- Jquery中的offset()和position()的区别
- jquery实现微信中长按识别二维码
- jquery deferred对象
- jQuery给动态添加的元素绑定事件
- jQuery toggleClass
- jquery使用data缓存数据
- html导航条下拉菜单代码(Html+Css+Jquery实现左侧滑动拉伸导航菜单栏的示例代码)
- JQuery中extend的用法
- jQuery邮箱自动补全
- jquery的each的用法
- jQuery多个版本间,以及与其他js文件冲突的解决方法
- jQuery如何操作下拉框select
- 1天密接者猛增77人,患者轨迹透露危险信号 吉林市全面封闭管理(1天密接者猛增77人)
- 吉林舒兰 封城 15人确诊 276人隔离,出现跨省传播(吉林舒兰封城)
- 四月新番CP人气榜公布,《剃须》两度上榜,沙优不是女朋友(四月新番CP人气榜公布)
- 2019年外媒秋季新番动画角色CP排行榜,桐人和爱丽丝落榜(2019年外媒秋季新番动画角色CP排行榜)
- 新一小兰领衔 盘点动漫中的那些 远距离恋爱情侣(盘点动漫中的那些)
- 大事件 合肥四中火了(大事件合肥四中火了)
热门推荐
- 无法打开sql server的连接(由于系统错误 126 SQL Server,指定驱动程序无法加载)
- 微信小程序存token(小程序开发实现access_token统一管理)
- docker安装java8(docker安装java环境的实现步骤)
- django settings配置(Django重置migrations文件的方法步骤)
- js的遍历数组方法(JS中数组常用的循环遍历你会几种)
- mysql数据库调优技术大全(Mysql数据库性能优化三分表、增量备份、还原)
- webkit倒影方法(巧用 -webkit-box-reflect 倒影实现各类动效小结)
- php扩展安装示例(php扩展开发入门demo示例)
- sql server显示当前登录用户命令(SQL Server正确删除Windows认证用户的方法)
- vue3 响应式的实现过程(Vue3.x使用mitt.js进行组件通信)