javascript获取高度-创新互联

元素边框外侧相对于父容器的边框外侧的高度

网站建设哪家好，找创新互联！专注于网页设计、网站建设、微信开发、重庆小程序开发、集团企业网站建设等服务项目。为回馈新老客户创新互联还提供了临武免费建站欢迎大家使用！

chrome firefox ie
原生

offsetTop 元素边框外侧相对于父容器的边框内侧的高度 元素边框外侧相对于父容器的边框内侧的高度 元素边框外侧相对于父容器的边框内侧的高度
offsetHeight 元素的高度（包括padding和border） 元素的高度（包括padding和border） 元素的高度（包括padding和border）
scrollHeight 元素内容实际高度 元素内容实际高度 元素内容实际高度
clientHeight 元素可见区域高度（包括padding） 元素可见区域高度（包括padding） 元素可见区域高度（包括padding）
clientTop 元素上边框高度 元素上边框高度 元素上边框高度
scrollTop 元素滚动了的高度 元素滚动了的高度 元素滚动了的高度
jquery

offset().top 获取元素距离文档顶部高度 获取元素距离文档顶部高度 获取元素距离文档顶部高度
position().top 元素margin外侧相对于父容器的边框内侧的高度 元素margin外侧相对于父容器的边框内侧的高度 元素margin外侧相对于父容器的边框内侧的高度
height() 元素实际高度 元素实际高度 元素实际高度
innerHeight() 元素高度（包括padding） 元素高度（包括padding） 元素高度（包括padding）
outerHeight() 元素高度（包括padding、border） 元素高度（包括padding、border） 元素高度（包括padding、border）
outerHeight(true) 元素高度（包括padding、border、margin） 元素高度（包括padding、border、margin） 元素高度（包括padding、border、margin）
scrollTop() 元素滚动了的高度 元素滚动了的高度 元素滚动了的高度
窗口、文档高度

$(window).height() 窗口可见区域高度 窗口可见区域高度 窗口可见区域高度
document.documentElement.clientHeight 文档可见区域高度 文档可见区域高度 文档可见区域高度
window.screen.height 屏幕分辨率高度 屏幕分辨率高度 屏幕分辨率高度
window.screen.availHeight 屏幕可用高度（屏幕高度除去底部任务栏） 屏幕可用高度（屏幕高度除去底部任务栏） 屏幕可用高度（屏幕高度除去底部任务栏）
window.screenY 窗口距离屏幕顶部高度 窗口距离屏幕顶部高度 窗口距离屏幕顶部高度
window.screenTop 窗口距离屏幕顶部高度 无此属性 窗口距离屏幕顶部高度
$document.height() 文档高度 文档高度 文档高度
document.documentElement.scrollHeight 文档内容高度 文档内容高度 文档内容高度
document.body.scrollHeight body内容高度 body内容高度 body内容高度

注意：
offsetTop 父容器必须设置了relative或者是absolute，否则会一直往上找设置了两者的祖先元素，chrome和ie最终返回距离文档顶部的高度，火狐返回的是距离body元素外边框的高度。
position也是一样，不过三个浏览器最后都返回的是距离文档顶部的高度。

通常情况下
$document.height()=document.documentElement.scrollHeight=document.body.scrollHeight=$body.outerHeight(true)

$(window).scrollTop()=$(document).scrollTop()=window.scrollY=document.body.scrollTop=
window.pageYOffset

$el.outerHeight()=$el[0].offsetHeight;

$(window).height()=document.documentElement.clientHeight;

$el.innerHeight()=$el[0].clientHeight;

$el.scrollTop()=$el[0].scrollTop;

在代码中如果要用到高度的时候最好使用offsetHeight或者outerHeight()。

窗口滚动到底部：窗口高度+滚动了的高度=文档高度。
元素滚动到底部：元素可见高度+滚动了的高度=元素内容高度。

浏览器差异
offsetHeight
IE、Opera 认为 offsetHeight = clientHeight + 滚动条 + 边框。
NS、FF 认为 offsetHeight 是网页内容实际高度，可以小于 clientHeight。

scrollHeight
IE、Opera 认为 scrollHeight 是网页内容实际高度，可以小于 clientHeight。
NS、FF 认为 scrollHeight 是网页内容高度，不过最小值是 clientHeight。

简单地说
clientHeight 就是透过浏览器看内容的这个区域高度。
NS、FF 认为 offsetHeight 和 scrollHeight 都是网页内容高度，只不过当网页内容高度小于等于 clientHeight 时，scrollHeight 的值是 clientHeight，而 offsetHeight 可以小于 clientHeight。
IE、Opera 认为 offsetHeight 是可视区域 clientHeight 滚动条加边框，scrollHeight 则是网页内容实际高度。

window 和 document使用height代替innerHeight和outerHeight

鼠标事件：
clientX 设置或获取鼠标指针位置相对于当前窗口的 x 坐标，其中客户区域不包括窗口自身的控件和滚动条。 
clientY 设置或获取鼠标指针位置相对于当前窗口的 y 坐标，其中客户区域不包括窗口自身的控件和滚动条。 
offsetX 设置或获取鼠标指针位置相对于触发事件的对象的 x 坐标。 
offsetY 设置或获取鼠标指针位置相对于触发事件的对象的 y 坐标。 
screenX 设置或获取获取鼠标指针位置相对于用户屏幕的 x 坐标。 
screenY 设置或获取鼠标指针位置相对于用户屏幕的 y 坐标。 
x 设置或获取鼠标指针位置相对于父文档的 x 像素坐标(亦即相对于当前窗口)。 
y 设置或获取鼠标指针位置相对于父文档的 y 像素坐标(亦即相对于当前窗口)。

总结：
document.documentElement是html元素，document.body是body元素，document.body.scrollHeight就是文档的总共高度，不是body的总共高度

原生js的 style属性只能获取到行内的样式信息，定义在 css中的是无法获取到的，如果需要获取的话用 document.defaultView.getComputedStyle(obj,null)[attr];

另外有需要云服务器可以了解下创新互联scvps.cn，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。

网页题目：javascript获取高度-创新互联
新闻来源：https://www.cdcxhl.com/article44/dehdee.html

成都网站建设公司_创新互联，为您提供软件开发、移动网站建设、网站制作、网站策划、网站营销、微信小程序

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联