一、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. python2和python3编程差异杂谈（-）

    python2 默认编码ascii 在使用中文时要显示的声明   #-*-encoding:utf-8-*- python3 默认编码utf-8,良好的支持了中文输入 python2: print函数 ...

  2. selenium driver版本和Chrome浏览器版本对应关系

    ChromeDriver v2.41 (2018-07-27) ---- Chrome v67-69ChromeDriver v2.40 (2018-06-07) ---- Chrome v66-68 ...

  3. redis在应用中使用连接不释放问题解决

    今天测试,发现redis使用的时候,调用的链接一直不释放.后查阅蛮多资料,才发现一个配置导致的.并不是他们说的服务没有启动导致的. 1)配置文件 #redis连接配置================= ...

  4. 012_Linux驱动之_wait_event_interruptible

    1. 首先这篇博客讲解得挺好的,推荐 wait_event_interruptible 使用方法 2 .函数原型: #define wait_event_interruptible(wq, condi ...

  5. update更新操作的URL地址

    http://localhost:8080/updateById/110?name=诸葛亮&age=3

  6. [Luogu] 线段树 2

    https://www.luogu.org/problemnew/show/P3373 双懒标记下放 先乘后加 #include <bits/stdc++.h> using namespa ...

  7. Flask-第三方插件

    Flask-Session 因为flask自带的session是将session存在cookie中: 所以才有了第三方Flask_session插件,可以将session存储在我们想存储的数据库中(r ...

  8. msql数据库常用指令操作

    数据库指令 1.数据库指令 创建数据库:create database db_name; 删除数据库:drop database db_name; 显示数据库:show databases: 导出数据 ...

  9. js去掉字符串中的所有空格

    1.使用js去掉字符串中的所有空格 1.1.定义一个去空格函数方法 function Trim(str,is_global){ var result; result = str.replace(/(^ ...

  10. JAVA基础知识|堆和栈

    一.java六个存储数据的地方 1)寄存器(register):这是最快的存储区,因为它位于不同于其他存储区的地方——处理器内部.但是寄存器的数量极其有限,所以寄存器由编译器根据需求进行分配.你不能直 ...