jQuery中outerHeight()的用法

最新推荐文章于 2024-03-29 10:03:44 发布
最新推荐文章于 2024-03-29 10:03:44 发布
阅读量1k 收藏 2
点赞数 1
CC 4.0 BY-SA版权
分类专栏： jquery效果 小知识
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qq_29783621/article/details/55261561
本文详细介绍了jQuery中元素尺寸获取的方法，特别是outerHeight()和outerWidth()函数的不同参数选项及其应用场景，帮助开发者正确选择合适的尺寸获取方式。

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

jQuery中outerHeight()的用法

一定会有人碰到过，用outerHeight()时外边距获取不到。这是因为它有个参数选项，这个参数定义了使用它时要不要带参数

$(selector).outerHeight(options)

参数值作用
optionstrue边距计算在内
false包括内边距和边框
空包括内边距和边框

同理outerWeight()也是一样的用法

附上jq的各种宽高获取方式

函数作用
width()返回元素的宽度。
height()返回元素的高度。
innerWidth()方法返回元素的宽度（包括内边距）。
innerHeight()方法返回元素的高度（包括内边距）。
outerWidth()方法返回元素的宽度（包括内边距和边框）。
outerHeight()方法返回元素的高度（包括内边距和边框）。
outerWidth(true)方法返回元素的宽度（包括内边距、边框和外边距）
outerHeight(true)方法返回元素的高度（包括内边距、边框和外边距）。
$(document).height()返回文档（HTML 文档）的高度
$(window).height()返回窗口（浏览器视口）的高度
jQuery中outerHeight()方法用法实例
10-24
在实际开发中，我们通常会使用jQuery来处理DOM元素，此时outerHeight()方法就显得尤为重要。它不仅帮助开发者在动态地添加、删除或者修改元素时，确保布局的变化符合预期，还可以在处理动画和滚动条相关的问题时提供...
Jquery 的outerHeight方法使用介绍
12-01
在给定的描述中，有一个简单的例子来演示`outerHeight()`的使用： ```html <p>Hello <p>2nd Paragraph ``` 对应的jQuery代码是： ```javascript var p = $("p:first"); $("p:last").text("outerHeight: " + p....
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如何获取元素的滚动高度
weixin_39037804的博客
09-30 744
获取浏览器显示区域（可视区域）的高度 ： $(window).height(); 获取浏览器显示区域（可视区域）的宽度 ： $(window).width(); 获取页面的文档高度 $(documen...
jquery 改html 高度,jQuery outerHeight() 方法
weixin_36359107的博客
07-01 310
jQuery outerHeight() 方法outsideHeight()方法获取或设置所选元素的外部高度(包括padding，border)。outsideHeight(true)方法获取或设置所选元素的外部高度(包括padding，border和margin)。当使用externalHeight()方法获取高度时，它将返回第一个选定元素的高度。当使用externalHeight()方法设置高...
JQuery 获取元素宽高
lizhongyang21的博客
10-09 2209
JQuery 获取元素宽高 （1）width() : 返回元素宽；（不包括内外边距，边框） （2）hight() : 返回元素高 ；（不包括内外边距，边框）； 如：$(window) . height() 获取窗口高度 （3）innerwidth(): 返回宽（包括内边距）； 高同样 （4）outerwi...
jQuery获取各种元素宽高
SSS_Benjamin的博客
02-17 569
$("div").width(); //获取元素的宽高无单位像素值，不包括padding,border,margin $("div").innerWidth(); //获取元素的宽高 + padding 无单位像素值 $("div").outerWidth(); //获取元素的宽高 + padding + border 无单位像素值 $("div").outerWidth(true); //获取元...
jQuery中的height innerHeight outerHeight区别示例介绍
12-10
总之，理解并正确使用`height()`, `innerHeight()`, 和 `outerHeight()`是jQuery中进行精确尺寸计算的关键。开发者应该根据实际需求选择合适的方法，并注意不同浏览器可能存在的兼容性问题。在处理动态内容或者响应...
jQuery如何获取元素宽高？
最新发布
qq_53895518的博客
03-29 1274
在jQuery中，获取元素的宽和高有多种方法，取决于你是否需要包括边框、内边距或其他额外空间。同时，请确保在DOM加载完成后执行这些操作，避免在元素尚未渲染完成时获取不到正确的尺寸。在未指定参数时获取的是内容区域的尺寸，若要获取考虑窗口滚动条影响的完整尺寸，可以使用。
jQuery之宽高
06-17 1219
这个宽高不包括paddingbordermargin。
js与jquery中宽度的获取
better1166的博客
06-12 721
1. 当样式写在行内的时候，如 &lt;div id="box" style="width:100px"&gt;时，用 style.width或者offsetWidth都可以获取元素的宽度。但是，当样式写在样式表中时，如 ＃box{ width: 100px; }, 此时只能用offsetWidth来获取元素的宽度，而style.width所返回的值为空。2、style.width 获取的元素宽度...
jQuery outerHeight() 方法
weixin_30412013的博客
10-10 124
outerHeight() 方法返回第一个匹配元素的外部高度。 如下面的图像所示，该方法包含 padding 和 border。 提示：如需包含 margin，请使用 outerHeight(true)。 相关方法： width()- 设置或返回元素的宽度 height()- 设置或返回元素的高度 innerWidth()- 返回元素的宽度（包含 padding） ...
JQuery height()、innerHeight()、outerHeight()、outerHeight(true)
椒盐薄荷糖
05-18 962
用于获取元素高度的四个函数。以盒子模型为例。1、height() 获取元素content的高度2、innerHeight()  获取匹配元素集合中第一个元素的当前计算的内部高度，包括顶部和底部的padding+content。不适用于window和document对象。3、outerHeight() 获取匹配元素集合的第一个元素的当前计算的外部高度，包括顶部和底部的padding和border、c...
js 和 jq 获取元素宽高总结记录
tym3515的博客
03-26 1657
javascript中获取dom元素高度和宽度网页可见区域宽： document.body.clientWidth;网页可见区域高： document.body.clientHeight;网页可见区域宽： document.body.offsetWidth (包括边线和滚动条的宽);网页可见区域高： document.body.offsetHeight (包括边线的宽);网页正文全文宽： docu...
.outerHeight()
bujiongdan的博客
10-10 426
获取div外部高度，外部指的是padding和border
jQuery 获取元素尺寸（宽和高）
黄河爱浪的博客-专注CSS,jQuery,uni-app领域
09-08 1397
在前面几篇文章中，介绍的都是和DOM相关的jQuery方法，本篇文章依旧继续讲和DOM相关的方法。 用jQuery获取一相元素的大小并不难，如下： $(window).width(); //浏览器的可视宽度 $(document).height(); //页面的高度 相信使用过jQuery的小伙伴都会使用这两个方法，那这篇文章还有写的必要吗？(在已发布过的几篇文章中，我并没有去介...
jq获取元素尺寸：innerWidth（）、innerHeight（）、outerWidth（）、outerHeight（）、outerWidth（true）、outerHeight（true）
YY的博客
11-11 582
width（）、height（）、innerWidth（）、innerHeight（）、outerWidth（）、outerHeight（）、outerWidth（true）、outerHeight（true）
js、jQuery获取各种宽高
飞扬_柳絮的专栏
03-25 833
js、jQuery获取各种宽高js获取各种宽高第一部分：DOM对象1.1只读属性   DOM节点的固有属性，只能通过js去获取不能设置，而且获取的值是只有数字不带单位的 1)clientWidth、clientHeight   元素的可视部分宽度和高度(padding+content)，如果没有滚动条，即为元素设定的高度和宽度，如果有滚动条，滚动条会遮盖元素的宽高，那么该属性就是元素本来宽高减
「jQuery系列」jQuery DOM操作/尺寸
日常笔记/总结/系列知识梳理
03-12 949
jQuery 提供了丰富的 DOM（文档对象模型）操作方法，使开发者能够轻松地创建、修改和删除页面上的元素。有时你可能需要获取包括内边距、边框或外边距在内的元素尺寸。在这个案例中，当用户点击按钮时，会触发一个事件处理函数，该函数获取。元素的宽度将被设置为 300px，高度将被设置为 200px。在这个案例中，我们获取了一个带有样式（内边距、边框和外边距）的。元素，你想获取它的宽度和高度。元素的宽度和高度，并将这些信息显示在。如果你想动态地改变元素的尺寸，可以使用。元素的内外尺寸，并将它们显示在。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值