js中不同的height,top的区别对比_基础知识
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了js中不同的height,top的区别对比_基础知识，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含2391字，纯文字阅读大概需要4分钟。
内容图文
每次看到js中的 clientHeight(clientTop), offsetHeight(offsetTop)，scrollHeight(scrollTop)就头大，根本分不清这几种的区别，然而碰到这些已经不 值一两次了，然后每次都要查看一下各自的区别，才能决定使用哪个。
本篇主要以chrome为准，可能各个浏览器之间还是有一些区别，但很多自己还未真正遇到过，还不是很清楚，等以后碰到了类似的兼容性问题，再记录到这里，这次就chrome浏览器中各个属性的区别做个记录，以方便以后的查看
一 clientHeight,offsetHeight,scrollHeight的区别
clientHeight在各个浏览器中基本是一样的，一致认为是内容可视区域的高度，也就是说页面浏览器中可以看到内容的这个区域的高度，不包括滚动条，不包括margin，但包括padding，也就是说实际的clientHeight = 当前对象可视区域的高度 + padding值，如下图所示 clientHeight = 对象可视区域高度(300) + 上下padding值(20) = 320
在不同浏览器都实用的javascript方案:
var w= document.documentElement.clientWidth || document.body.clientWidth; var h= document.documentElement.clientHeight || document.body.clientHeight;
offsetHeight = 当前对象的高度 + 滚动条 + borde值 + padding值，上图中当前对象的高度和可视区域高度是一样的，所以offsetHeight = 300 + padding(20px ) + border(10px) = 330
scrollHeight是网页内容的实际高度，最小值就是clientHeight，也就是说可以是跟clientHeight相等的,但我们假设这样一个情形，如下代码所示，父div高度是300px，子div高度是500px，这时候就会形成滚动条,此时父div的结构图如下：
父div的的scrollHeight 就应该是scrollHeight = 500px + padding值
因为此时产生了滚动条，此时父div的可视区域高度为283，当前对象高度也就是父div的高度为300，因此
clientHeight = 283px + padding值(20px) = 303px
offsetHeight = 父div的高度(300px) + padding值(20px) + 边框(10px) = 330px
二 clientTop,offsetTop,scrollTop的区别
clientTop的理解可以参考clientHeight，clientHeight的的计算方式是当前可视区域的高度 加上 padding值，那么clientTop就可以理解为当前可视区域到上一级元素的距离。
如上图所示，clientTop就是5px，大部分情况下，clientTop都是这个border值。
offsetTop是当前对象到body元素的距离，它的计算方式相对复杂，先从上图进行理解，当前对象指的是border边框之内的区域，所以计算offsetTop要从当前对象的margin开始，计算公式如下 offsetTop = 当前对象的margin-top + 当前对象所有上级元素的margin-top + 当前对象所有上级元素的border-top，需要注意的是offsetTop是不能进行直接赋值的，只能通过这样的计算方式得到。
scrollTop是当前对象的最顶部到当前对象在当前窗口显示的范围内的顶边的距离．即是在出现了纵向滚动条的情况下，滚动条拉动的距离。
以上就是js中不同的height、 top的区别对比，希望对大家的学习有所帮助。
内容总结
以上是互联网集市为您收集整理的js中不同的height,top的区别对比_基础知识全部内容，希望文章能够帮你解决js中不同的height,top的区别对比_基础知识所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。