jQuery中的.height()、.innerHeight()和.outerHeight()和W3C的盒模型相关的几个获取元素尺寸的方法。对应的宽度获取方法分别为.width()、.innerWidth()和.outerWidth(),在此不详述。

1. .height()

获取匹配元素集合中的第一个元素的当前计算高度值 或 设置每一个匹配元素的高度值(带一个参数)。

注意:1).css('height').height()之间的区别是后者返回一个没有单位的数值(例如,400),前者是返回带有完整单位的字符串(例如,400px)。

2).height()总是返回内容宽度,不管CSSbox-sizing属性值。.height('value')设置的容器宽度是根据CSSbox-sizing属性来定的,
将这个属性值改成border-box,将造成这个函数改变这个容器的outerHeight,而不是原来的内容高度。

2. .innerHeight()

为匹配的元素集合中获取第一个元素的当前计算高度值,包括padding,但是不包括border。

3. .outerHeight()

获取元素集合中第一个元素的当前计算高度值,包括padding,border和选择性的margin。返回一个整数(不包含“px”)表示的值
,或如果在一个空集合上调用该方法,则会返回 null。

.outerHeight()计算中总是包含padding-top
,padding-bottom 和 border-top,border-bottom ;如果includeMargin参数是true,那么margin
(top 和 bottom)也会被包含。

jQuery中的.height()、.innerHeight()和.outerHeight()的更多相关文章

  1. Jquery中的 height(), innerHeight() outerHeight()区别

    jQuery中的 height innerHeight outerHeight区别 标准浏览器下: height:高度 innerHeight:高度+补白 outerHeight:高度+补白+边框,参 ...

  2. Jquery中的height(),innerHeight(),outerHeight()的区别

    前言 最近练习做弹窗,遇到height(),innerHeight(),outerHeight()的区别. 根据下面的盒模型来了解三者的区别. height():element的height; inn ...

  3. jQuery中的height()、innerheight()、outerheight()的区别总结

    在前端jQuery代码中突然看到outerheight(),第一感觉就是,这是什么鬼?然后仔细查阅了一下,居然发现还有这么多相似的东西. 在jQuery中,获取元素高度的函数有3个,它们分别是heig ...

  4. jQuery中关于height,innerWidth与outerWidth的区别

    jQuery width() 和 height() 方法 width() 方法设置或返回元素的宽度(不包括内边距.边框或外边距). height() 方法设置或返回元素的高度(不包括内边距.边框或外边 ...

  5. jquery 之height(),innerHeight(),outerHeight()方法区别详解

    在jQuery中,获取元素高度的函数有3个,它们分别是height(). innerHeight().outerHeight(). 与此相对应的是,获取元素宽度的函数也有3个,它们分别是width() ...

  6. jQuery height()、innerHeight()、outerHeight()函数的区别详解

    参考来源:http://www.jb51.net/article/84897.htm 代码示例(可复制到编辑器直接打开): <!DOCTYPE html> <html lang=&q ...

  7. jquery 对象的 height、innerHeight、outerHeight 的区别以及DOM 元素的 clientHeight、offsetHeight、scrollHeight、offsetTop、scrollTop

    前言:jquery 对象的 height.innerHeight.outerHeight,还有 DOM 元素的 clientHeight.offsetHeight.scrollHeight.offse ...

  8. 关于height、offsetheight、clientheight、scrollheight、innerheight、outerheight的区别

    二.也是平时经常用到的offsetheight 它返回的高度是内容高+padding+边框,但是注意哦,木有加margin哦,当然一般也木有啥需要把margin加进去的,以上代码为例,结果显示上图h2 ...

  9. jQuery中height()不能精确计算的问题

    jQuery中关于高度的计算有三个方法:outerHeight().innerHeight().height() outerHeight():获取元素集合中第一个元素的当前计算高度值,包括paddin ...

随机推荐

  1. 桥模式设计模式进入Bridge

    Abstraction:抽象部分的父类,定义须要实现的接口. 维护对实现部分的引用,从而把实现桥接到Implementor中去 Implementor:实现部分的接口 RefinedAbstracti ...

  2. iis10 HTTP 错误 500.19 - Internal Server Error

    HTTP 错误 500.19 - Internal Server Error 无法访问请求的页面,因为该页的相关配置数据无效. 详细错误信息: 模块    IIS Web Core 通知    未知 ...

  3. Android开发之Handler和Looper的关系

              关于Handler的总结. Message:消息,当中包括了消息ID,消息处理对象以及处理的数据等,由MessageQueue统一列队,终由Handler处理. Handler:处 ...

  4. ASP.NET 运行

    ASP.NET 运行 对于ASP.NET开发,排在前五的话题离不开请求生命周期.像什么Cache.身份认证.Role管理.Routing映射,微软到底在请求过程中干了哪些隐秘的事,现在是时候揭晓了.抛 ...

  5. UI 纯代码实现计算器

    //  MHTAppDelegate.h //  TestCa //  Copyright (c) 2014年 Summer. All rights reserved. #import <UIK ...

  6. 学习pthreads,创建和终止多线程

    更CPU多线程编程,通过笔者的研究发现,,pthreads使用日趋广泛.它是螺纹POSIX标准,它定义了一组线程的创建和操作API. 配置环境见上博客文章.配置环境后,只需要加入#include &l ...

  7. Java就业前景怎么样?学了后好找工作吗?

    不知道大家对Java就业前景了解多少.随着信息化的发展.IT培训受倒了越来越多人的追捧.在开发领域,JAVA培训成为了很多人的首选!JAVA应用广泛.JAVA培训就业前景良好. 眼下.尽管JAVA人才 ...

  8. 最艰难的采访IT公司ThoughtWorks代码挑战——FizzBuzzWhizz游戏

    最近的互联网招聘平台拉勾网在五月推出了"最艰难的采访IT公司"码挑战活动,评选出了5个最难面试的IT公司,即:ThoughtWorks.Google.Unisys.Rackspac ...

  9. IntelliSense 无法仅由函数的返回类型重装分辨

    IntelliSense:无法仅由函数的返回类型重装分辨       d:\programfiles (x86)\microsoft sdks\windows\v7.0a\include\winbas ...

  10. js cookie设置最大过期时间 Infinity

    Note: 对于永久cookie我们用了Fri, 31 Dec 9999 23:59:59 GMT作为过期日.如果你不想使用这个日期,可使用世界末日Tue, 19 Jan 2038 03:14:07 ...