首页
题库
面试
求职
学习
竞赛
More+
所有博客
搜索面经/职位/试题/公司
搜索
我要招人
去企业版
登录 / 注册
首页
>
试题广场
>
js的各种位置,比如clientHeight,scrollH
[问答题]
请你讲一下对于js中各种位置的理解,比如clientHeight,scrollHeight,offsetHeight ,以及scrollTop, offsetTop,clientTop的各自表示什么,它们的区别是什么?
添加笔记
求解答(0)
邀请回答
收藏(35)
分享
纠错
4个回答
添加回答
13
绿皮兔子
*
英语记忆
* 元素属性(针对元素):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)
7
growYdp_
clientHeight-元素可见区域的高度,容器的高度。不包括滚动条和border的高度。 offsetHeight-元素和容器的高度,包括边框和滚动条的高度。 scrollHeight-指元素内容的高度,而不是容器的高度。当元素内容的高度大于容器高度时,指元素内容的高度。
发表于 2019-03-12 12:58:13
回复(0)
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)
0
奶油小兔子
clientHeight: 可视区域的高度 ,不包含border和滚动条;scrollHeight:元素内容的实际距离,包括了隐藏部分的内容高度;offsetHeight:可视区域的高度,包含了border和滚动条;
clientTop:边框的厚度,默认为0 ;scrollTop:滚动内容被隐藏的高度;offetTop:距离最近的开启了position定位的元素的距离,若无就是距离body的高度。
发表于 2020-07-17 21:47:33
回复(0)
这道题你会答吗?花几分钟告诉大家答案吧!
提交观点
问题信息
前端工程师
Javascript
上传者:
小小
难度:
4条回答
35收藏
1593浏览
热门推荐
相关试题
ajax原理、如何实现刷新数据及优点?
迅雷
Javascript
评论
(7)
5.下列判断正确的是( )
资料分析
言语理解与表达
资料分析
评论
(1)
已知a
40
=...
京东
职能
2019
财务
保险
评论
(1)
《拳皇97》最后BOSS是谁?
游戏常识
评论
(1)
《魔兽世界》中,下列不属于玩家可以...
游戏常识
评论
(1)
扫描二维码,关注牛客网
意见反馈
下载牛客APP,随时随地刷题