offsetHeight,clientHeight,height

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

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)

边城的刀声
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
分析clientHeight、offsetHeight、scrollHeight
03-16
NULL 博文链接：https://love2java.iteye.com/blog/403776
clientHeight和offsetHeight
树上骑个猴的博客
12-22 6771
clientHeight：包括padding但不包括border、水平滚动条、margin的元素的高度。对于inline的元素这个属性一直是0，单位px，只读元素。 offsetHeight：包括padding、border、水平滚动条，但不包括margin的元素的高度。对于inline的元素这个属性一直是0，单位px，只读元素。 style.height //返回元素的高度（包括元素高度，不包括内边距、边框和外边距） clientHeight //返回元素的高度（包括元素高度、
offsetHeight, clientHeight与scrollHeight的区别
linhuiDragon的专栏
01-22 284
[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之间的区别
12-10
在网上搜了一下，结论非常笼统，讲IE从不讲版本，因此自己做了测试并上传...其计算方式为clientHeight = topPadding + bottomPadding+ height – scrollbar.height。 offsetHeight在IE6，IE7，IE8以及最新的的FF, Chr
clientHeight
04-08
四种浏览器对_clientHeight、offsetHeight、scrollHeight、clientWidth、offsetWidth_和_scrollWidth_的解
js中不同的height, top的区别对比
11-25
每次看到js中的 clientHeight(clientTop), offsetHeight(offsetTop)，scrollHeight(scrollTop)就头大，根本分不清这几种的区别，然而碰到这些已经不 值一两次了，然后每次都要查看一下各自的区别，才能决定使用哪个...
JavaScript之scrollTop、scrollHeight、offsetTop、offsetHeight等属性学习笔记
01-19
clientHeight可以用公式 CSS height + CSS padding – 水平滚动条的高度 (如果存在) 来计算。 如图，这样一个div，它的clientHeight为95，计算：50(height)+30(padding-top)+30(padding-bottom)-15(经测量滚动条...
JS中的offsetWidth、offsetHeight、clientWidth、clientHeight等等的详细介绍
嘿嘿
05-24 253
javascript中offsetWidth、clientWidth、width、scrollWidth、clientX、screenX、offsetX、pageX offsetWidth //返回元素的宽度（包括元素宽度、内边距和边框，不包括外边距） offsetHeight //返回元素的高度（包括元素高度、内边距和边框，不包括外边距） clientWidth //返回元素的宽度（包括元素宽度、内边距，不包括边框和外边距） clientHeight ...
offsetHeight和clientHeight的区别
teresa502的专栏
08-24 982
clientHeight大家对 clientHeight 都没有什么异议，都认为是内容可视区域的高度，也就是说页面浏览器中可以看到内容的这个区域的高度，一般是最后一个工具条以下到状态栏以上的这个区域，与页面内容无关。offsetHeightIE、Opera 认为 offsetHeight = clientHeight + 滚动条 + 边框。NS、FF 认为 offsetHeight 是网页内容实际高度，可以小于 clientHeight。
优化——outerHeight、offsetHeight、clientHeight、淡入淡出和下拉收起
weixin_48569349的博客
12-28 88
摒弃jQuery优化
html元素的 height、clientHeight和offsetHeight之间的区别
weixin_30367945的博客
06-18 244
height：指元素内容的高度，jQuery中的height()方法返回的就是这个高度。 clientHeight：内容高度+padding高度，jQuery中的innerHeight()方法返回的就是这个高度。 offsetHeight：内容高度+padding高度+边框宽度，jQuery中的outerHeight()方法返回的就是这个高度。 width：指元...
offsetHeight clientHeight scrollHeight三者的区别与浏览器表现
haha-zhao的博客
05-27 705
offsetHeight = height + padding + border; clientHeight = height + padding; scrollHeight = srcollTop + clientHeight + offsetHeight; 在文档中offsetHeight是内容区域的高度 document.document.offsetHeight + document.bo...
从CSS盒子模型说到offsetHeight、scrollHeight、clientHeight的区别
weixin_53474595的博客
11-14 1387
offsetHeight、scrollHeight、clientHeight这三个属性我们经常在开发中遇到，如果小伙伴们没有经常使用的话，很容易把这些属性搞混，今天就来理一理这三个属性分别代表什么？offsetHeight = 内容高度 + padding + borderclientheight = 内容高度 + paddingscrollHeight = 内容实际尺寸 + padding。
我用到的clientHeight等属性
xiongzhengxiang的专栏
05-09 1352
弹出浮动层，让起居于浏览器底部是需求中，我用到的各种height有： 1  浏览器可见区域高度：document.documentElement.clientHeight;    ***document.body.clientHeight*** 是整个页面内容的高度，而非浏览器可见区域的高度 2 滚动条已滚动的高度：document.documentElement.scrollTop;
区分clientHeight、scrollHeight、offsetHeight
xm2by的博客
08-21 1392
区分clientHeight、scrollHeight、offsetHeight clientHeight： 元素的可见高度 scrollHeight： 元素的整体高度 offsetHeight： 元素的高度 参考文献： [1] 搞清clientHeight、offsetHeight、scrollHeight、offsetTop、scrollTop [2] js中offsetHe...
height、clientHeight、scrollHeight、offsetHeight区别
MOONCOM的博客
06-06 1511
我们来实现test中的onclick事件    function justAtest()     {         var test= document.getElementById("test");         var test2=document.getElementById("test2")         var test3=document.getElementB
获取元素高度，offsetHeight不起效果
最新发布
05-23
如果 `offsetHeight` 不起作用，可以尝试以下方法： 1. 使用 `clientHeight` ...var height = elem.clientHeight || parseInt(window.getComputedStyle(elem).height) || elem.scrollHeight; console.log(height); ```

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值