首页 > 试题广场 >

js的各种位置，比如clientHeight,scrollH

[问答题]
请你讲一下对于js中各种位置的理解，比如clientHeight,scrollHeight,offsetHeight ,以及scrollTop, offsetTop,clientTop的各自表示什么，它们的区别是什么？
查看答案及解析
添加回答
绿皮兔子头像 绿皮兔子

* 英语记忆
* 元素属性（针对元素）：client 当事人（客户机） offset 抵消 scroll 纸卷(卷曲)
* 事件属性（针对鼠标）：clientX 当事人         pageX 页    screenX屏幕
*
* 元素属性（with，height）
* client: 可视区域（不包含滚动条，border，包含padding）（对于window可用window.innerHeight）
* offset: 元素宽高（不包含margin，包含padding，border，滚动条）（client+滚动条+border）（对于window可用window.outerHeight）
* scroll：实际内容宽高（不包含滚动条，border，包含padding，未显示内容）
* 元素属性（top，left）
* client：边框的厚度（指的就是border宽）
* offset：如果最近的父级元素开启position：自己边框（外边框）到最近的父级元素的边框（内边框）的距离；如果最近的父级元素没有开启position：则是到body的距离。
* scroll：未显示出来的内容（从内边框开始算起）（对于window可用window.pageXOffset代替）
*
* 事件属性
* clientX:鼠标距离浏览器距离
* screenX：鼠标距离显示器距离
* pageX：鼠标距离真实内容（显示出来+卷曲的内容）距离

对于元素来说图例：


对于鼠标来说图例

编辑于 2021-02-22 19:09:08 回复(0)
growYdp_头像 growYdp_
clientHeight-元素可见区域的高度，容器的高度。不包括滚动条和border的高度。 offsetHeight-元素和容器的高度，包括边框和滚动条的高度。 scrollHeight-指元素内容的高度，而不是容器的高度。当元素内容的高度大于容器高度时，指元素内容的高度。
发表于 2019-03-12 12:58:13 回复(0)
勤奋努力的红太狼不愿吃饼头像 勤奋努力的红太狼不愿吃饼
clientHeight：div的内部可视高度，包括heiht 和上下padding
scrollHeight：内部的实际高度 heiht 和上下padding，一般与clientHeight一致
offsetHeight ：div的整体可视高度，包括heiht 和上下padding 和上下 border-width
scrollTop：滚动条卷起的高度，scrollHeight-clientHeight
offsetTop：div 到页面顶端的距离
clientTop：容器内部相对于容器本身的top偏移，实际就是 上border-width
发表于 2021-11-11 22:17:07 回复(0)
奶油小兔子头像 奶油小兔子
clientHeight: 可视区域的高度 ，不包含border和滚动条；scrollHeight:元素内容的实际距离，包括了隐藏部分的内容高度；offsetHeight:可视区域的高度，包含了border和滚动条；
clientTop:边框的厚度，默认为0 ；scrollTop:滚动内容被隐藏的高度；offetTop:距离最近的开启了position定位的元素的距离，若无就是距离body的高度。
发表于 2020-07-17 21:47:33 回复(0)
提交观点

问题信息

前端工程师 Javascript
上传者：小小
难度：
4条回答 1590浏览

热门推荐

相关试题

扫一扫，把题目装进口袋

求职之前，先上牛客

扫描二维码，进入QQ群

扫描二维码，关注牛客公众号