jquery中outerHeight()与height()的区别

最新推荐文章于 2022-11-11 08:59:38 发布
最新推荐文章于 2022-11-11 08:59:38 发布
阅读量696 收藏
点赞数
分类专栏： 前端 文章标签： js取元素高度
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/hejisan/article/details/80035676
版权
本文介绍了在前端开发中常用的元素尺寸获取方法，包括innerHeight(), innerWidth(), width(), height(), outerHeight()等。这些方法分别用于获取元素的不同尺寸，如内部高度、内部宽度、外部高度等，并说明了它们是否包含padding、border和margin。

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

innerHeight() 方法返回第一个匹配元素的内部高度。如下面的图像所示，该方法包含 padding，但不包含 border 和 margin。


innerWidth() 方法返回第一个匹配元素的内部宽度。如下面的图像所示，该方法包含 padding，但不包含 border 和 margin。


width() 方法设置或返回被选元素的宽度。当该方法用于返回宽度时， 则返回第一个匹配元素的宽度。当该方法用于设置宽度时，则设置所有匹配元素的宽度。如下面的图像所示，该方法不包含 padding、border 或 margin。

height() 方法设置或返回被选元素的高度。当该方法用于返回高度时， 则返回第一个匹配元素的高度。当该方法用于设置高度时，则设置所有匹配元素的高度。如下面的图像所示，该方法不包含 padding、border 或 margin。

outerHeight() 方法返回第一个匹配元素的外部高度。如下面的图像所示，该方法包含 padding 和 border。如需包含 margin，请使用 outerHeight(true)。


jQuery中outerHeight()方法用法实例
10-24
jQuery有一个非常实用的方法，就是outerHeight()，它用来获取匹配元素集合中第一个元素的外部高度值。这个方法在处理页面布局时特别有用，尤其是当你需要精确地了解元素在页面上的整体占用空间时。 在jQuery中，...
jQuery中的height innerHeight outerHeight区别示例介绍
10-25
在Web开发中，对元素尺寸的精确控制是一项常见的需求，而jQuery提供了一系列的方法来获取和设置元素的高度，包括：height(), innerHeight(), 和 outerHeight()。这些方法可以帮助开发者轻松获取元素的高度值，但它们...
outerHeight()与height()的区别
dream0129的博客
04-21 955
1. .height() 获取匹配元素集合中的第一个元素的当前计算高度值 或 设置每一个匹配元素的高度值（带一个参数）。 注意： 1）.css('height')和.height()之间的区别是后者返回一个没有单位的数值（例如，400），前者是返回带有完整单位的字符串（例如，400px）。 2）.height()总是返回内容宽度,不管CSS box-sizi
Jquery中关于height，innerheight，outer height的知识小计
amytun_yu的博客
02-13 308
标准浏览器下： height:高度 innerHeight:高度＋补白 ———-height+paddingouterHeight:高度＋补白＋边框，参数为true时：高度＋补白＋边框＋边距 高度＋补白＋边框——– height+padding+border有参数true时：height+padding+border+margin例子01：html代码： 复制代码代码如下:jjjjj js代码：
JQuery——outerHeight()
m0_37616866的博客
10-18 306
一、收集例子 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中outerHeight()的用法
张井乙ccccyc的博客
02-16 1015
jQuery中outerHeight()的用法一定会有人碰到过，用outerHeight()时外边距获取不到。这是因为它有个参数选项，这个参数定义了使用它时要不要带参数 $(selector).outerHeight(options) 参数 值 作用 options true 边距计算在内 false 包括内边距和边框 空 包括内边距和边框 同理o
.outerHeight()
bujiongdan的博客
10-10 419
获取div外部高度，外部指的是padding和border
Jquery 的outerHeight方法使用介绍
12-01
5. `outerHeight()`与`height()`的区别在于`height()`只计算元素内容区域的高度，而不包括内填充、边框和外边距。 了解并熟练运用`outerHeight()`方法，可以帮助开发者更好地控制页面元素的布局，尤其是在动态调整...
jquery 改html 高度,jQuery outerHeight() 方法
weixin_36359107的博客
07-01 300
jQuery outerHeight() 方法outsideHeight()方法获取或设置所选元素的外部高度(包括padding，border)。outsideHeight(true)方法获取或设置所选元素的外部高度(包括padding，border和margin)。当使用externalHeight()方法获取高度时，它将返回第一个选定元素的高度。当使用externalHeight()方法设置高...
JQuery height()、innerHeight()、outerHeight()、outerHeight(true)
椒盐薄荷糖
05-18 947
用于获取元素高度的四个函数。以盒子模型为例。1、height() 获取元素content的高度2、innerHeight()  获取匹配元素集合中第一个元素的当前计算的内部高度，包括顶部和底部的padding+content。不适用于window和document对象。3、outerHeight() 获取匹配元素集合的第一个元素的当前计算的外部高度，包括顶部和底部的padding和border、c...
jq获取元素尺寸：innerWidth（）、innerHeight（）、outerWidth（）、outerHeight（）、outerWidth（true）、outerHeight（true）
YY的博客
11-11 558
width（）、height（）、innerWidth（）、innerHeight（）、outerWidth（）、outerHeight（）、outerWidth（true）、outerHeight（true）
jQuery中的height()、innerheight()、outerheight()的区别总结
setsunadoudou的博客
10-15 745
在前端jQuery代码中突然看到outerheight(),第一感觉就是，这是什么鬼？然后仔细查阅了一下，居然发现还有这么多相似的东西。 在jQuery中，获取元素高度的函数有3个，它们分别是heig...
jquery的outerHeight()等方法使用
weixin_30780649的博客
07-31 145
相关方法： width()- 设置或返回元素的宽度 height()- 设置或返回元素的高度 innerWidth()- 返回元素的宽度（包含 padding） innerHeight()- 返回元素的高度（包含 padding） outerWidth()- 返回元素的宽度（包含 padding 和 border） $(selector).outerHeig...
（转）jQuery height()、innerHeight()、outerHeight()函数的区别详解
microcosmv的博客
02-21 447
链接：jQuery height()、innerHeight()、outerHeight()函数的区别详解 函数 高度范围 jQuery版本 支持写操作 height() height 1.0+ 1.0+ innerHeight() height + padding 1.2.6+ 1.8.0+ outerHeight() height + pad
JQ height()、innerHeight()、outerHeight()函数的区别
一直专注于互联网
02-28 382
在jQuery中，获取元素高度的函数有3个，它们分别是height()、 innerHeight()、 outerHeight()。与此相对应的是，获取元素宽度的函数也有3个，它们分别是width()、 innerWidth()、 outerWidth()。在这里，我们以height()、innerHeight()、outerHeight()3个函数为例，来详细介绍它们之间的区别。   下...
jQuery中innerHeigh()和outerHeight()方法
Mr_GZB的博客
03-25 628
.height()：返回内容的高度，不包括padding，border和margin。 .innerHeight()：返回包括内容和padding的高度，不包括border和margin。 .outerHeight()：返回包括内容，padding和border的高度，不包括margin。 .outerHeight(true)：返回整个元素的高度，包括内容，padding，border和margin。 ...
jquerr对象的height()/innerHeight()/outerHeight()/outerHeight(true)区别
PR
06-14 448
比如通过$("#id")获取了一个对象后: 它的height()方法是获得它的盒子模型的内部内容的实际高度; 它的innerHeight()方法是获得它的盒子模型的内部内容的实际高度+padding的高度; 它的outerHeight()方法是获得它的盒子模型的内部内容的实际高度+padding的高度+边框border的高度; 它的outerHeight(true)方法是获
Jquery(JS)中.height()和.innerHeight()，outerHeight()的差别
请叫我大师兄
02-19 3601
Jquery(JS)中.height()和.innerHeight()，outerHeight()的差别,同理得宽也是这么滴。
全面掌握jQuery核心功能与插件开发指南
- **index(subject)**: 返回指定元素在当前jQuery对象集合中的索引位置。 #### 数据缓存 - **data(name, [value])**: 为元素设置数据缓存，或获取之前设置的数据。 - **removeData(name)**: 移除指定元素上由`data...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值