clientHeight、offsetHeight、scrollHeight、offsetTop、scrollTop

clientHeight和offsetHeight属性和元素的滚动、位置没有关系,它代表元素的高度,其中:

clientHeight:包括padding但不包括border、水平滚动条、margin的元素的高度(对于inline的元素这个属性一直是0,单位px,只读元素)

offsetHeight:包括padding、border、水平滚动条,但不包括margin的元素的高度(对于inline的元素这个属性一直是0,单位px,只读元素)

scrollHeight:包括当前不可见部分的元素的高度

scrollTop: 有滚动条时,滚动条向下滚动的距离也就是元素顶部被遮住部分的高度

offsetTop: 当前元素顶部距离最近父元素顶部的距离,和有没有滚动条没有关系

参考链接:  https://blog.csdn.net/qq_35430000/article/details/80277587

原文地址:https://www.cnblogs.com/alberGeng/p/11662942.html

时间: 2024-10-12 20:40:18

clientHeight、offsetHeight、scrollHeight、offsetTop、scrollTop的相关文章

详解clientHeight、offsetHeight、scrollHeight

关于clientHeight.offsetHeight.scrollHeight window.screen.availWidth 返回当前屏幕宽度(空白空间) window.screen.availHeight 返回当前屏幕高度(空白空间) window.screen.width 返回当前屏幕宽度(分辨率值) window.screen.height 返回当前屏幕高度(分辨率值) window.document.body.offsetHeight; 返回当前网页高度 window.docume

html中offsetTop、clientTop、scrollTop、offsetTop各属性介绍

HTML精确定位:scrollLeft,scrollWidth,clientWidth,offsetWidth scrollHeight: 获取对象的滚动高度. scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离 scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离 scrollWidth:获取对象的滚动宽度 offsetHeight:获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度 offsetLeft:

JS中offsetTop、clientTop、scrollTop、offsetTop各属性介绍

javascript中制作滚动代码的常用属性 页可见区域宽: document.body.clientWidth;网页可见区域高: document.body.clientHeight;网页可见区域宽: document.body.offsetWidth   (包括边线的宽);网页可见区域高: document.body.offsetHeight (包括边线的宽);网页正文全文宽: document.body.scrollWidth;网页正文全文高: document.body.scrollHe

offsetTop、clientTop、scrollTop、offsetTop

好好看看下面那张图,基本上就没啥问题了! scrollHeight: 获取对象的滚动高度.  scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离  scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离  scrollWidth:获取对象的滚动宽度  offsetHeight:获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度  offsetLeft:获取对象相对于版面或由 offsetParent 属性指定的

html中offsetTop、clientTop、scrollTop、offsetTop

HTML精确定位:scrollLeft,scrollWidth,clientWidth,offsetWidth scrollHeight: 获取对象的滚动高度. scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离 scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离 scrollWidth:获取对象的滚动宽度 offsetHeight:获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度 offsetLeft:

offsetTop、clientTop、scrollTop、offsetTop各属性介绍

HTML精确定位:scrollLeft,scrollWidth,clientWidth,offsetWidth scrollHeight: 获取对象的滚动高度. scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离 scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离 scrollWidth:获取对象的滚动宽度 offsetHeight:获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度 offsetLeft:

html中offsetTop、clientTop、scrollTop、offsetTop各属性

HTML精确定位:scrollLeft,scrollWidth,clientWidth,offsetWidth scrollHeight: 获取对象的滚动高度. scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离 scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离 scrollWidth:获取对象的滚动宽度 offsetHeight:获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度 offsetLeft:

html中offsetTop、clientTop、scrollTop、offsetTop各属性介绍(转载)

HTML精确定位:scrollLeft,scrollWidth,clientWidth,offsetWidth scrollHeight: 获取对象的滚动高度. scrollLeft: 设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离 scrollTop: 设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离 scrollWidth: 获取对象的滚动宽度 offsetHeight: 获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度 offsetL

关于clientHeight,offsetHeight等小笔记

遇到一个有个问题:关于clientHeight,offsetHeight,scrollHeight,以及height,contentHeight(width也一样)的区别. 这里有参考http://stackoverflow.com/questions/21064101/understanding-offsetwidth-clientwidth-scrollwidth-and-height-respectively, https://developer.mozilla.org/en-US/doc

搞清clientHeight、offsetHeight、scrollHeight、offsetTop、scrollTop

每个HTML元素都具有clientHeight offsetHeight scrollHeight offsetTop scrollTop 这5个和元素高度.滚动.位置相关的属性,单凭单词很难搞清楚分别代表什么意思之间有什么区别.通过阅读它们的文档总结出规律如下:clientHeight和offsetHeight属性和元素的滚动.位置没有关系它代表元素的高度,其中:clientHeight:包括padding但不包括border.水平滚动条.margin的元素的高度.对于inline的元素这个属