offsetHeight,clientHeight,height

最新推荐文章于 2024-11-16 15:25:49 发布
原创 最新推荐文章于 2024-11-16 15:25:49 发布 · 1k 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#css

本文解释了offsetHeight与clientHeight的区别：前者包括内容、内边距及边框的高度；后者仅包括内容与内边距的高度。通过一个具体的CSS样例展示了这两种属性的实际计算方式。

offsetHeight:包括内容、内边距、边框的高度

clientHeight:包括内容、内边距的高度


看一下下边的css定义后的效果

.game-opt {
margin-top: 10px;
margin-bottom: 10px;
padding-top: 3px;
height: 20px;
border: solid 1px;

}


>> $('.game-opt')[0].clientHeight 
23 (height+paddingTop) 
>> $('.game-opt')[0].offsetHeight 
25 (height+borderTop+borderBottom+paddingTop)

JavaScript---关于height/offsetHeight/clientHeight/innerHeight/outerHeight的区分说明
COCOLI_BK的博客
04-27 523
对应属性的说明height()为h1offsetheight()为h2clientHeight()为h3innerHeight()为h3outerHeight(options)为h2，options为true则包含上下margin 直接上图： height()为h1 它主要是返回元素的高度或者说这个div的内容的高度，它是jquery对像 offsetheight()为h2 它返回的高度是内容高+padding+边框，不包含margin值 clientHeight()为h3 clientHeight在页面
分析clientHeight、offsetHeight、scrollHeight
03-16
NULL 博文链接：https://love2java.iteye.com/blog/403776
clientHeight和offsetHeight
树上骑个猴的博客
12-22 7432
clientHeight：包括padding但不包括border、水平滚动条、margin的元素的高度。对于inline的元素这个属性一直是0，单位px，只读元素。 offsetHeight：包括padding、border、水平滚动条，但不包括margin的元素的高度。对于inline的元素这个属性一直是0，单位px，只读元素。 style.height //返回元素的高度（包括元素高度，不包括内边距、边框和外边距） clientHeight //返回元素的高度（包括元素高度、
offsetHeight, clientHeight与scrollHeight的区别
linhuiDragon的专栏
01-22 360
[size=xx-large][color=indigo]offsetHeight, clientHeight与scrollHeight的区别[/color][/size] [size=large][color=red] 在网上搜了一下，结论非常笼统，讲IE从不讲版本，因此自己做了测试并上传结论。以下结论皆是在标准模式下测试通过的，没有测试quirk模式。[/color][/size] ...
详解HTML元素的height、offsetHeight、clientHeight、scrollTop等梳理
01-18
尺寸相关：offsetHeight、clientHeight、scrollHeight； 偏移相关：offsetTop、clientTop、scrollTop、pageYOffset、scrollY； 获取相对视口位置：Element.getBoundingClientRect()； 获取元素的style对象：...
解析offsetHeight,clientHeight,scrollHeight之间的区别
09-04
- scrollHeight：等于body的内填充加上内容的高度（不受CSS height属性的影响），但最小值是documentElement.clientHeight。 - 对于documentElement： - clientHeight：等于窗口高度减去滚动条的宽度。 - ...
offsetHeight和clientHeight的区别
最新发布
10-28
我们被要求解释offsetHeight和clientHeight的区别。根据引用[1][2][4]中的信息，我们可以总结如下： offsetHeight: - 包括元素的内容高度、内边距(padding)和边框(border)的宽度。 - 换句话说：offsetHeight = 内容...
【JavaScript】clientWidth 和 clientHeight 与 offsetWidth 和 offsetHeight 属性详解
lph159的博客
09-11 2182
和是用于获取元素的内部宽度和高度的属性，通常用于测量内容区域的大小。：返回元素的内部宽度，包括内边距（padding），但不包括边框（border）、外边距（margin）和水平滚动条（如果有的话）。返回的值是整数。：与类似，返回元素的内部高度，包含内边距，不包括边框、外边距和水平滚动条。这两个属性常用于获取元素的实际可视区域，尤其是在处理带有内边距的容器时，可以帮助更好地控制内容的显示效果。和是更为完整的宽高属性，包含了元素的边框和滚动条。
JS中的offsetWidth、offsetHeight、clientWidth、clientHeight等等的详细介绍
嘿嘿
05-24 329
javascript中offsetWidth、clientWidth、width、scrollWidth、clientX、screenX、offsetX、pageX offsetWidth //返回元素的宽度（包括元素宽度、内边距和边框，不包括外边距） offsetHeight //返回元素的高度（包括元素高度、内边距和边框，不包括外边距） clientWidth //返回元素的宽度（包括元素宽度、内边距，不包括边框和外边距） clientHeight ...
搞清clientHeight、offsetHeight、scrollHeight、offsetTop、scrollTop
热门推荐
qq_35430000的博客
05-11 17万+
转载自：https://www.imooc.com/article/17571网页可见区域高：document.body.clientHeight网页正文全文高：document.body.scrollHeight网页可见区域高（包括边线的高）：document.body.offsetHeight网页被卷去的高：document.body.scrollTop屏幕分辨率高：window.screen...
16-简单理解offsetHeight与clientHeight的区别
weixin_46002095的博客
11-16 995
是一个只读属性，它表示元素的总高度，包括元素的边框(border)、内边距(padding)和水平滚动条的高度（如果存在）。具体而言，等于元素的内容高度(content height) 加上内边距、边框和水平滚动条的高度。也是一个只读属性，它表示元素的内部高度，包括内边距(padding)，但不包括边框(border)和水平滚动条的高度（如果存在）。具体而言，等于元素的内容高度(content height) 加上内边距的高度。
优化——outerHeight、offsetHeight、clientHeight、淡入淡出和下拉收起
weixin_48569349的博客
12-28 171
摒弃jQuery优化
html元素的 height、clientHeight和offsetHeight之间的区别
weixin_30367945的博客
06-18 302
height：指元素内容的高度，jQuery中的height()方法返回的就是这个高度。 clientHeight：内容高度+padding高度，jQuery中的innerHeight()方法返回的就是这个高度。 offsetHeight：内容高度+padding高度+边框宽度，jQuery中的outerHeight()方法返回的就是这个高度。 width：指元...
offsetHeight clientHeight scrollHeight三者的区别与浏览器表现
haha-zhao的博客
05-27 769
offsetHeight = height + padding + border; clientHeight = height + padding; scrollHeight = srcollTop + clientHeight + offsetHeight; 在文档中offsetHeight是内容区域的高度 document.document.offsetHeight + document.bo...
scrollHeight, clientHeight, offsetHeight的区别
大赚万万亿
11-06 897
浏览器窗口和网页文档 先明确浏览器窗口和网页文档的区别，拿下面这张图来说 右边那张图中，大红色方框框起来的是浏览器窗口，而网页文档就是左边这张图。先不用去管scrollHeight这些东西，后面再解释。 先明确浏览器窗口和网页文档是不同的！！不用去纠结它们什么时候高度相等，明白这两个代表的含义才是最重要的。 浏览器窗口 宽：window.innerWidth 高：window.innerHeight 一些注意点： 无论是否出现滚动条，这两个值都是不变的。 当调整浏览器大小时，这两个...
从CSS盒子模型说到offsetHeight、scrollHeight、clientHeight的区别
weixin_53474595的博客
11-14 1928
offsetHeight、scrollHeight、clientHeight这三个属性我们经常在开发中遇到，如果小伙伴们没有经常使用的话，很容易把这些属性搞混，今天就来理一理这三个属性分别代表什么？offsetHeight = 内容高度 + padding + borderclientheight = 内容高度 + paddingscrollHeight = 内容实际尺寸 + padding。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值