理解clientX、clientY、offsetLeft、event.offsetTop、offsetWidth、offsetHeight、clientWidth、clientHeight、scrollTop、scrollHeight
一、clientX和clientY
事件发生时，鼠标距离浏览器的可视区域的X、Y轴的位置，不包含滚动条的区域的部分。就算是页面进行了滚动，鼠标的坐标值还是参考可视区域的。
二、offsetLeft和offsetTop
事件源元素相对于父节点的偏移的像素值。
三、offsetWidth和offsetHeight
获取的是元素的宽度，包含border，padding，内容宽度，以及滚动条的宽度，和element.getBoundingClientRect()的值是一致的。
四、clientWidth和clientHeight
获取的是元素实际的内容宽度，不包含border，padding，内容宽度，以及滚动条的宽度。
五、scrollTop和scrollHeight
scrollTop属性可以获取或设置一个元素的内容垂直滚动的像素数
scrollHeight是一个元素内容高度的度量，包括由于溢出导致的视图中不可见内容
scrollHeight = scrollTop + clientHeight
理解clientX、clientY、offsetLeft、event.offsetTop、offsetWidth、offsetHeight、clientWidth、clientHeight、scrollTop、scrollHeight的更多相关文章
- JavaScript--clientX,clientY、pageX,pageY、offsetLeft,offsetTop/offsetWidth,offsetHeight、scrollLeft,scrollTop/scrollWidth,scrollHeight、clientHeight,clientWidth区别
/*在事件的内部console.dir(event)*/ /** * 事件对象event * clientX/clientY 获取鼠标基于浏览器窗口(可视区域的坐标位置)全兼容 * * pageX/p ...
- offsetWidth/offsetHeight,clientWidth/clientHeight与scrollWidth/scrollHeight的区别
offsetWidth/offsetHeight返回值包含content + padding + border,效果与e.getBoundingClientRect()相同 clientWidth/c ...
- 通过一个实例理解 offsetLeft，offsetTop; offsetWidth , offsetHeight
obj.offsetTop 指 obj 相对于版面或由 offsetParent 属性指定的父坐标的计算上侧位置,整型 obj.offsetLeft 指 obj 相对于版面或由 offsetParen ...
- javascript - 所有的视图属性和方法（offsetHeight、clientHeight、scrollHeight、innerHeight等）
注意:本文只简单的介绍了各个视图的属性和方法.如果想要知道兼容性或者更多,请至文章底部参考链接处. 本文内容分为五大部分: Window视图属性 innerHeight 和 innerWidth ou ...
- 关于height、offsetheight、clientheight、scrollheight、innerheight、outerheight的区别一览
平时,不管在pc端页面还是移动端页面,因为我们一般很少会设置某个块的的高度,但是呢,我有时候有需要取到这些高度以便于我们方便进行判断和下一步的编写.一般这个时候我都是直接的获取一个块的高度.heigh ...
- 一文看懂js中元素偏移量（offsetLeft,offsetTop,offsetWidth,offsetHeight）
偏移量(offset dimension) 偏移量:包括元素在屏幕上占用的所有可见空间,元素的可见大小有其高度,宽度决定,包括所有内边距,滚动条和边框大小(注意,不包括外边距). 以下4个属性可以获取 ...
- 关于height、offsetheight、clientheight、scrollheight、innerheight、outerheight的区别
二.也是平时经常用到的offsetheight 它返回的高度是内容高+padding+边框,但是注意哦,木有加margin哦,当然一般也木有啥需要把margin加进去的,以上代码为例,结果显示上图h2 ...
- js中offsetHeight、clientHeight、scrollHeight等相关属性区分总结
今天再次遇到了offset***.client***.scroll***的这三类属性的问题,总是混淆,现归纳总结如下: 大体上来说可以这样理解: client***属性(clientWidth.cli ...
- offsetHeight/Width clientHeight/Width scrollHeight/Width等高宽算法
图解: jquery里的对应取法: clientHeight/Width:innerHeight/Width(), offsetHeight/Width: outerHeight/Width(). w ...
- offsetheight 和clientheight、scrollheight、scrollTop区别
clientHeight:元素客户区的大小,指的是元素内容及其边框所占据的空间大小(经过实践取出来的大多是视口大小) scrollHeight: 滚动大小,指的是包含滚动内容的元素大小(元素内容的总高 ...
随机推荐
- Java8-Lock-No.04
import java.util.HashMap; import java.util.Map; import java.util.concurrent.ExecutorService; import ...
- Java8-Lock-No.02
import java.util.concurrent.ExecutorService; import java.util.concurrent.Executors; import java.util ...
- BZOJ 2127 / Luogu P1646 [国家集训队]happiness (最小割)
题面 BZOJ传送门 Luogu传送门 分析 这道题又出现了二元关系,于是我们只需要解方程确定怎么连边就行了 假设跟SSS分在一块是选文科,跟TTT分在一块是选理科,先加上所有的收益,再来考虑如何让需 ...
- OSS - 有关于OSSClient的单例化
之前在每个控制层OSSClient都是通过新new的方式创建OSSClientBuilder().build(endpoint,accessKeyId,accessKeySecret)进行创建 后期我 ...
- Task异步
快速示例 class Program { static void Main(string[] args) { //Console.WriteLine("main start..") ...
- PRIMARY KEY，key，unique key
主键索引(必须指定为“PRIMARY KEY”,没有PRIMARY Index). 唯一索引(unique index,一般写成unique key). 普通索引(index,只有这一种才是纯粹的in ...
- mysql建表问题
PUBLIC Stack Overflow Tags Users Jobs TeamsQ&A for workLearn More MySQL error: The maximum col ...
- 一、docker安装CentOS7
一.安装步骤 前提条件 Docker运行在CentOS7上,要求系统64位.系统内核版本为3.10以上. Docker是一个进程,一启动就两个进程,一个服务,一个守护进程.占用资源就非常少,启动速度非 ...
- Linux命令行提交更新冲突
1.在harry目录下的hello文件第五行加一些内容 2.将修改后文件执行提交操作 提交成功,文件版本升为5 3.在sally目录下同样修改hello文件第五行 4.sally进行提交操作 发现提交 ...
- EntityFramework Core Code First 已有数据库
问题场景:我已经有一个数据库,想用 EF core Code First,怎么办? 首先,可以参考微软的API文档:通过现有数据库在 ASP.NET Core 上开始使用 EF Core, 这一步可以 ...