一、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的更多相关文章

  1. JavaScript--clientX,clientY、pageX,pageY、offsetLeft,offsetTop/offsetWidth,offsetHeight、scrollLeft,scrollTop/scrollWidth,scrollHeight、clientHeight,clientWidth区别

    /*在事件的内部console.dir(event)*/ /** * 事件对象event * clientX/clientY 获取鼠标基于浏览器窗口(可视区域的坐标位置)全兼容 * * pageX/p ...

  2. offsetWidth/offsetHeight,clientWidth/clientHeight与scrollWidth/scrollHeight的区别

    offsetWidth/offsetHeight返回值包含content + padding + border,效果与e.getBoundingClientRect()相同 clientWidth/c ...

  3. 通过一个实例理解 offsetLeft，offsetTop; offsetWidth , offsetHeight

    obj.offsetTop 指 obj 相对于版面或由 offsetParent 属性指定的父坐标的计算上侧位置,整型 obj.offsetLeft 指 obj 相对于版面或由 offsetParen ...

  4. javascript - 所有的视图属性和方法（offsetHeight、clientHeight、scrollHeight、innerHeight等）

    注意:本文只简单的介绍了各个视图的属性和方法.如果想要知道兼容性或者更多,请至文章底部参考链接处. 本文内容分为五大部分: Window视图属性 innerHeight 和 innerWidth ou ...

  5. 关于height、offsetheight、clientheight、scrollheight、innerheight、outerheight的区别一览

    平时,不管在pc端页面还是移动端页面,因为我们一般很少会设置某个块的的高度,但是呢,我有时候有需要取到这些高度以便于我们方便进行判断和下一步的编写.一般这个时候我都是直接的获取一个块的高度.heigh ...

  6. 一文看懂js中元素偏移量（offsetLeft,offsetTop,offsetWidth,offsetHeight）

    偏移量(offset dimension) 偏移量:包括元素在屏幕上占用的所有可见空间,元素的可见大小有其高度,宽度决定,包括所有内边距,滚动条和边框大小(注意,不包括外边距). 以下4个属性可以获取 ...

  7. 关于height、offsetheight、clientheight、scrollheight、innerheight、outerheight的区别

    二.也是平时经常用到的offsetheight 它返回的高度是内容高+padding+边框,但是注意哦,木有加margin哦,当然一般也木有啥需要把margin加进去的,以上代码为例,结果显示上图h2 ...

  8. js中offsetHeight、clientHeight、scrollHeight等相关属性区分总结

    今天再次遇到了offset***.client***.scroll***的这三类属性的问题,总是混淆,现归纳总结如下: 大体上来说可以这样理解: client***属性(clientWidth.cli ...

  9. offsetHeight/Width clientHeight/Width scrollHeight/Width等高宽算法

    图解: jquery里的对应取法: clientHeight/Width:innerHeight/Width(), offsetHeight/Width: outerHeight/Width(). w ...

  10. offsetheight 和clientheight、scrollheight、scrollTop区别

    clientHeight:元素客户区的大小,指的是元素内容及其边框所占据的空间大小(经过实践取出来的大多是视口大小) scrollHeight: 滚动大小,指的是包含滚动内容的元素大小(元素内容的总高 ...

随机推荐

  1. [Functional Programming] Using ComposeK for both get State and modify State

    We have State like this: const state = { cards: [ { id: "green-square", color: "green ...

  2. yii 查询垃圾分类接口

    public function actionGarbage() { // $param = \Yii::$app->request->post('rubbish', ''); // 接收j ...

  3. CAZAC序列

    定义: CAZAC(Const Amplitude Zero Auto-Corelation),即为恒包络零自相关序列. 性质: 1,恒包络特性:任意长度的CAZAC序列幅值恒定. 2,理想的周期自相 ...

  4. P4148 简单题 k-d tree

    思路:\(k-d\ tree\) 提交:2次 错因:整棵树重构时的严重错误:没有维护父子关系(之前写的是假重构所以没有维护父子关系) 题解: 遇到一个新的点就插进去,如果之前出现过就把权值加上. 代码 ...

  5. 【luogu1468】[Violet]蒲公英--求区间众数

    题目背景 亲爱的哥哥: 你在那个城市里面过得好吗? 我在家里面最近很开心呢.昨天晚上奶奶给我讲了那个叫「绝望」的大坏蛋的故事的说!它把人们的房子和田地搞坏,还有好多小朋友也被它杀掉了.我觉得把那么可怕 ...

  6. [Qt Quick] qmlscene 工具的使用

    qmlscene是Qt 5提供的一个查看qml文件效果的工具.特点是不需要编译应用程序. qmlscene = qml + scene (场景) qmlscene.exe位于Qt的安装目录下 (类似/ ...

  7. pause函数

    pause函数 调用该函数可以造成进程主动挂起,等待信号唤醒.调用该系统调用的进程将处于阻塞状态(主动放弃cpu) 直到有信号递达将其唤醒. int pause(void);     返回值:-1 并 ...

  8. 测试的Python、 Java语言之争

    现在测试行业如果不会开发语言的话是很难找到工作的,即使是一些功能测试的岗位也会要求代码语言作为技术储备,因为如果做自动化测试或者测试工具脚本开发或者接口测试等都离不开开发语言,那作为测试如果没有代码经 ...

  9. JAVA安全漫谈1-8笔记

    一.反射篇1 classloader就是java的类加载器,告诉虚拟机如何加载这个类.默认情况下根据类名来加载类,类名必须是完整路径 public class class_init { { Syste ...

  10. varnish web cache服务

    varnish介绍 缓存开源解决方案: - varnish - 充分利用epoll机制(能显著提高程序在大量并发连接中只有少量活跃的情况下的系统CPU利用率),并发量大,单连接资源较轻 - squid ...