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

最新推荐文章于 2022-12-28 16:59:37 发布
最新推荐文章于 2022-12-28 16:59:37 发布
阅读量1.4k 收藏
点赞数 1
分类专栏： html jquery 文章标签： 元素高度
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_38563845/article/details/79133390
版权

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

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

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

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

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

 

su的前端之路
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JQuery 1.3 中文参考手册
03-14
outerHeight(options) outerWidth(options) 选择器 基本 #id element .class * selector1,selector2,selectorN 层级 ancestor descendant parent > child prev + next prev ~ siblings 基本 :first :...
jquery-outerHeight(true)的值有误问题解决办法（chrome浏览器）
Jasmines1993的个人收藏
04-17 1835
问题描述：    我想获取一个容器元素的高度（包含margin+padding+height+border），容器中包含图片，当我在chrome浏览器中调试移动到容器元素上的时候，我通过Jquery中 $('element').outerHeight(true) 所获取到的值并不是我想要的值，而是比我想要获取到的值更小。 这个容器元素的样式中包含容器本身的宽度width,position:rela...
outerHeight、innerHeight 、 outerHeight(true) 什么意思？
编码行者的博客
10-18 1213
定义和用法 outerHeight() 方法返回第一个匹配元素的外部高度。 如下面的图像所示，该方法包含 padding 和 border。 **提示：**如需包含 margin，请使用 outerHeight(true)。 相关方法： width() - 设置或返回元素的宽度 height() - 设置或返回元素的高度 innerWidth() - 返回元素的宽度（包含 padding） ...
outerHeight() 和outerWidht() 值为0问题解决
小果果
09-24 1370
今天一个jquery问题纠结了我老半天，我们网站用了一个jquery邮箱自动输入的插件，当我把这个页面嵌到一个隐藏的iframe时，定位就出错了，通过调试发现在隐藏的iframe里面运用两个函数outerHeight() 和outerWidht()出来的值都为0。一开始以为是jquery函数被框架给限制了，但是发现框架不写任何样式还是0.通过查找资料，终于发现原来是jquery低版本对隐藏元素尺寸
优化——outerHeight、offsetHeight、clientHeight、淡入淡出和下拉收起
最新发布
weixin_48569349的博客
12-28 95
摒弃jQuery优化
Jquery 1.3 简体中文手册
04-22
outerHeight(options) outerWidth(options) 选择器 基本 #id element .class * selector1,selector2,selectorN 层级 ancestor descendant parent > child prev + next prev ~ siblings 基本 :first :...
jquery实现简单拖拽效果
10-15
} else if(y > $(document).height() - $(ele).outerHeight(true)) { y = $(document).height() - $(ele).outerHeight(true); } $(ele).css({ 'left': x + 'px', 'top': y + 'px' }) }); $(document)....
jquery卷帘式导航栏.zip
11-21
jQuery库提供了方便的DOM操作和事件处理，使我们能轻松实现动态效果。卷帘效果通常通过改变导航栏的高度来实现。当用户点击某个导航项时，导航栏高度调整到相应链接的高度。例如： ```javascript $(document).ready...
JQuery height()、innerHeight()、outerHeight()、outerHeight(true)
椒盐薄荷糖
05-18 890
用于获取元素高度的四个函数。以盒子模型为例。1、height() 获取元素content的高度2、innerHeight()  获取匹配元素集合中第一个元素的当前计算的内部高度，包括顶部和底部的padding+content。不适用于window和document对象。3、outerHeight() 获取匹配元素集合的第一个元素的当前计算的外部高度，包括顶部和底部的padding和border、c...
div隐藏时jquery outerHeight(true);值有问题
凡夫俗子
10-12 1254
1. 当div是隐藏的时候 $(".content-header").outerHeight(true);计算出的高度值不对。应在显示的时候计算div的高度值
innerWidth( )、outerWidth()、outerWidth(true)尺寸大小
m0_51040189的博客
05-01 636
1）以上参数为空，则是获取相应值，返回的是数字型。 2）如果参数为数字，则是修改相应值。 3）参数可以不必写单位（写单位加""） <style> div { width: 200px; height: 200px; background-color: red; padding: 10px; border: 15px solid green; ...
比较height()，innerHeight()，outerHeight()和outerHeight(true)
...
06-24 719
对比jq中获取元素高度的几个函数(宽度同解)：height()，innerHeight()，outerHeight()和outerHeight(true)。 height():元素内容的高度，即盒模型中的content高度； innerHeight()：content高度+padding上下高度； outerHeight()：content高度+padding上下高度+边框上下高度； ou
JS、JQuery获取各种高度和元素距离
ksx2333的博客
04-01 4935
文章目录前言1 js原生1.1 offset系列1.2 client系列1.3 scroll系列2 jquery写法2.1 offset和position2.2 元素滚动2.2.1 scrollTop()2.2.2 $(document.body).scrollTop+ $(document.documentElement).scrollTop()2.2.3 $('body,html').scrollTop(60)2.3 元素的尺寸2.3.1 内容尺寸 与css中设置的响应的属性相同2.3.2 内部尺寸2.
jQuery height()&offset()
龙腾四海365的专栏
04-19 1657
jQuery height()&offset()方法详解 *jQuery CSS 操作 - height() 方法 **定义和用法 height() 方法返回或设置匹配元素的高度。 **返回高度 返回第一个匹配元素的高度。 如果不为该方法设置参数，则返回以像素计的匹配元素的高度。 语法 $(selector).height() **
jQuery中的height()、innerheight()、outerheight()的区别总结
setsunadoudou的博客
10-15 688
在前端jQuery代码中突然看到outerheight(),第一感觉就是，这是什么鬼？然后仔细查阅了一下，居然发现还有这么多相似的东西。 在jQuery中，获取元素高度的函数有3个，它们分别是heig...
Jquery获取offsetHeight
weixin_33725515的博客
12-28 570
纯javascript： window.document.getElementById('MainColumn').offsetHeight jquery: $('#id').get(0).offsetHeight ==>如有问题，请联系我：easonjim#163.com，或者下方发表评论。<== ...
jquery的height()与js的offsetheight
lzf的博客
07-17 9820
offsetHeight是js对象所能支持的方法，而$("div:eq(1)")所获得的是一个JQUERY对象，他是不支持offsetHeight的。 offsetHeight只能只能用于获取高度，不能设置高度。 例如：x.offestHeight=y.offsetHeight; console.log(x.offsetHeight); 打印的仍然是以前x的offsetHeight。
Web前端开发技术-Jquery的尺寸和位置操作.pptx
07-07
通过使用width()、height()、outerWidth(true)、outerHeight(true)、innerWidth()和innerHeight()等方法，可以方便地获取或设置元素的尺寸，包括包含padding、border、margin等内容。这些方法可以帮助开发者在前端...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值