jquery中height()、outerHeight()、outerHeight(true)和offset()的区别

最新推荐文章于 2021-10-18 16:02:56 发布
最新推荐文章于 2021-10-18 16:02:56 发布
阅读量1.5k 收藏
点赞数 1
CC 4.0 BY-SA版权
分类专栏： html jquery 文章标签： 元素高度
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qq_38563845/article/details/79133390
本文介绍了如何使用height(), outerHeight(), outerHeight(true)和offset()等方法来获取HTML元素的不同类型的尺寸信息及其在页面中的位置。height()获取的是元素本身的高度，而outerHeight()和outerHeight(true)则分别获取了包含padding和border以及同时包含margin的高度。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

height()       获取的是元素不包含padding、border、margin的高度

outerHeight()   获取的是元素包含padding、border，不包含margin的高度

outerHeight(true)   获取的是元素包含padding、border、margin的高度

offset()    返回的是匹配元素相对于当前可视窗口的偏移坐标，返回的对象中包括2个整型属性top和left（此方法对可见元素有效）

可以看到，元素的border和padding都是0，所以 height() 和 outerHeight() 相等

 

使用jquery中height()方法获取各种高度大全
10-26
在Web开发中，尤其是在使用jQuery库时，经常需要获取页面元素的高度。JQuery是一个快速、小型且功能丰富...在实际开发过程中，结合其他jQuery方法，如offset(), position()等，可以进行更复杂的布局和动画效果的实现。
Jquery 的outerHeight方法使用介绍
10-26
outerHeight()方法可以与其他jQuery方法和属性组合使用，比如offset(), height(), 和width()等，以实现更复杂的布局和交互效果。例如，可以在元素可见性变化时使用show()和hide()方法，并且结合outerHeight()来更新...
JQuery——outerHeight()
m0_37616866的博客
10-18 324
一、收集例子 1、如需包含 margin，请使用 outerHeight(true) <style> .test{ height:100px; width:200px; padding:10px; margin:10px; border:5px solid red; } </style> <div class="test"></div> <script> $(function(){ var h = $(".test").ou
Jquery获取offsetHeight
weixin_33725515的博客
12-28 596
纯javascript： window.document.getElementById('MainColumn').offsetHeight jquery: $('#id').get(0).offsetHeight ==>如有问题，请联系我：easonjim#163.com，或者下方发表评论。<== ...
jQuery height()&offset()
龙腾四海365的专栏
04-19 1725
jQuery height()&offset()方法详解 *jQuery CSS 操作 - height() 方法 **定义和用法 height() 方法返回或设置匹配元素的高度。 **返回高度 返回第一个匹配元素的高度。 如果不为该方法设置参数，则返回以像素计的匹配元素的高度。 语法 $(selector).height() **
jquery的height()与js的offsetheight
lzf的博客
07-17 9968
offsetHeight是js对象所能支持的方法，而$("div:eq(1)")所获得的是一个JQUERY对象，他是不支持offsetHeight的。 offsetHeight只能只能用于获取高度，不能设置高度。 例如：x.offestHeight=y.offsetHeight; console.log(x.offsetHeight); 打印的仍然是以前x的offsetHeight。
jquery 改html 高度,jQuery outerHeight() 方法
weixin_36359107的博客
07-01 310
jQuery outerHeight() 方法outsideHeight()方法获取或设置所选元素的外部高度(包括padding，border)。outsideHeight(true)方法获取或设置所选元素的外部高度(包括padding，border和margin)。当使用externalHeight()方法获取高度时，它将返回第一个选定元素的高度。当使用externalHeight()方法设置高...
jquery中获得元素尺寸和坐标的方法整理
10-25
在前端开发中，使用jQuery库可以方便地获取和设置元素的尺寸与坐标。通过jQuery提供的方法，开发者能够轻松地进行页面元素的布局与交互。下面将详细介绍这些方法。 一、获得坐标的方法 1. offset()方法： offset()...
[原创] jQuery源码分析-17尺寸和大小 Dimensions & Offset
03-25
本文将对jQuery中用于处理元素尺寸和偏移的接口进行深入分析，帮助开发者理解各种接口的应用场景和具体用法。 ### Offset接口 Offset接口主要包括`.offset()`和`.offsetParent()`两个方法。 #### .offset() `....
Web前端开发技术-Jquery的尺寸和位置操作.pptx
07-07
在Web前端开发中，jQuery库提供了丰富的功能，其中包括对元素尺寸和位置的处理。这篇讲解主要围绕jQuery的尺寸和位置操作展开，详细介绍了几个关键的方法。 首先，我们来看尺寸操作。jQuery提供了多种方法来获取和...
比较height()，innerHeight()，outerHeight()和outerHeight(true)
...
06-24 784
对比jq中获取元素高度的几个函数(宽度同解)：height()，innerHeight()，outerHeight()和outerHeight(true)。 height():元素内容的高度，即盒模型中的content高度； innerHeight()：content高度+padding上下高度； outerHeight()：content高度+padding上下高度+边框上下高度； ou
div隐藏时jquery outerHeight(true);值有问题
凡夫俗子
10-12 1309
1. 当div是隐藏的时候 $(".content-header").outerHeight(true);计算出的高度值不对。应在显示的时候计算div的高度值
Jquery中的 height(), innerHeight() outerHeight()区别
weixin_30252155的博客
11-19 102
jQuery中的 height innerHeight outerHeight区别 标准浏览器下： height:高度 innerHeight:高度＋补白 outerHeight:高度＋补白＋边框，参数为true时：高度＋补白＋边框＋边距 html代码： <div class="width: 150px;height:20px;float: le...
outerHeight、innerHeight 、 outerHeight(true) 什么意思？
编码行者的博客
10-18 1309
定义和用法 outerHeight() 方法返回第一个匹配元素的外部高度。 如下面的图像所示，该方法包含 padding 和 border。 **提示：**如需包含 margin，请使用 outerHeight(true)。 相关方法： width() - 设置或返回元素的宽度 height() - 设置或返回元素的高度 innerWidth() - 返回元素的宽度（包含 padding） ...
jQuery中的height()、innerheight()、outerheight()的区别总结
weixin_30782331的博客
01-07 143
在前端jQuery代码中突然看到outerheight(),第一感觉就是，这是什么鬼？然后仔细查阅了一下，居然发现还有这么多相似的东西。 在jQuery中，获取元素高度的函数有3个，它们分别是height()、innerHeight()、outerHeight()。 与此相对应的是，获取元素宽度的函数也有3个，它们分别是width()、innerWidth()、outerWidth()。 ...
jquery-outerHeight(true)的值有误问题解决办法（chrome浏览器）
Jasmines1993的个人收藏
04-17 1959
问题描述：    我想获取一个容器元素的高度（包含margin+padding+height+border），容器中包含图片，当我在chrome浏览器中调试移动到容器元素上的时候，我通过Jquery中 $('element').outerHeight(true) 所获取到的值并不是我想要的值，而是比我想要获取到的值更小。 这个容器元素的样式中包含容器本身的宽度width,position:rela...
jQuery中height、innerheight和outerheight的区别
u011784205的专栏
07-21 685
简单记录一下
outerHeight(ture)会影响到height()方法吗
最新发布
01-21
### jQuery `outerHeight(true)` 对 `height()` 方法行为的影响 `outerHeight(true)` 和 `height()` 是两个独立的方法，用于获取不同类型的元素高度测量值。具体来说： - `$(element).height()` 返回指定元素的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值