oEvent.clientX 是指鼠标到可视区左边框的距离。

oEvent.clientY 是指鼠标到可视区上边框的距离。


clientWidth  是指可视区的宽度。

clientHeight  是指可视区的高度。

clientLeft  是指左边框的宽度

clientTop  是指上边框的宽度。

获取可视区的宽高:
  document.documentElement.clientWidth
  document.documentElement.clientHeight


offsetWidth  是指div的宽度(包括div的边框)

offsetHeight  是指div的高度(包括div的边框)

offsetLeft  是指div到整个页面左边框的距离(不包括div的边框)

offsetTop  是指div到整个页面上边框的距离(不包括div的边框)

scrollTop  是指可视区顶部边框与整个页面上部边框的看不到的区域。

scrollLeft  是指可视区左边边框与整个页面左边边框的看不到的区域。

scrollWidth  是指左边看不到的区域加可视区加右边看不到的区域即整个页面的宽度(包括边框

scrollHeight  是指上边看不到的区域加可视区加右边看不到的区域即整个页面的高度(包括边框)

向上滚动的距离scollTop的兼容性写法:
  document.documentElement.scrollTop || document.body.scrollTop

scroll offset & client总结的更多相关文章

  1. Html 中scroll offset client 总结

    HTML精确定位:scrollLeft,scrollWidth,clientWidth,offsetWidth scrollHeight: 获取对象的滚动高度. scrollLeft:设置或获取位于对 ...

  2. JavaScript中的 offset, client,scroll

    在js 中我们要用到的 offset, client, scroll 在这我把自己理解的给大家分享一下. offset div.offsetTop 指div距离上方或上层控件的距离,单位像素 div. ...

  3. client/scroll/offset width/height/top/left ---记第一篇博客

    client/scroll/offset width/height/top/left (盒模型为contentBox,定位原点是元素左上角边框最外层的交点) clientWidth  width+左p ...

  4. offset/client/scroll一些总结

    offset/client/scroll一些总结 1.offset 首先offset共有五个值 1.offsetParent 2.offsetTop 3.offsetLeft 4.offsetWidt ...

  5. javascript中常用坐标属性offset、scroll、client

    原文:javascript中常用坐标属性offset.scroll.client 今天在学习js的时候觉得这个问题比较容易搞混,所以自己画了一个简单的图,并且用js控制台里面输出测试了下,便于理解. ...

  6. scroll、client和offset的区别

    scroll.client和offset的区别:http://www.cnblogs.com/pcd12321/p/4448420.html

  7. 三大家族(offset、scroll、client)

    offset.scroll.client三大家族 offset家族 offsetWidth 与 offsetHeight offset 偏移 用于获取元素自身的位置和大小 offsetWidth和of ...

  8. JS 中的offset、scroll、client总结

    经常碰到offset.scroll.client这几个关键字,每次都要各种实验,这里总结一下. 两张图镇楼,随时翻阅 1. offset offset 指偏移,包括这个元素在文档中占用的所有显示宽度, ...

  9. 关于scroll、client、offset和style中的height、width、top以及bottom属性

    内容和图片来自offset.scroll.client三大家族, 此处仅作记录使用 client offset scroll

随机推荐

  1. 整合ssh的时候出现空指针java.lang.NullPointerException

    转自:https://blog.csdn.net/koudailidexiaolong/article/details/9468857 HTTP Status 500 - type Exception ...

  2. ASP.NET Core MVC 2.x 全面教程_ASP.NET Core MVC 03. 服务注册和管道

    ASP.NET Core MVC 2.x 全面教程_ASP.NET Core MVC 03. 服务注册和管道 语雀: https://www.yuque.com/yuejiangliu/dotnet/ ...

  3. Spring源码分析——调试环境搭建(可能是最省事的构建方法)

    1. 依赖工具 idea git jdk 1.8 + Gradle 2. 获取源码 从github https://github.com/spring-projects/spring-framewor ...

  4. NYOJ1——A+B Problem NYOJ2——括号配对问题

    A+B Problem 时间限制:3000 ms  |  内存限制:65535 KB 难度:0   描述:此题为练手用题,请大家计算一下a+b的值  输入:输入两个数,a,b 输出:输出a+b的值 样 ...

  5. linux 问题二 查看系统是32位还是64位

    方法: 1.uname -a 2.uname -m 3.file /sbin/init 4.arch 5.Settings -> Details 说明: 1. i386 适用于intel和AMD ...

  6. PostgreSQL - 修改默认端口号

    升级PostgreSQL遇到的问题 之前将PostgreSQL从9.5升级到了10.3版本,安装时将端口设置成了5433,(默认是5432),后来发现在使用psql来restore db会发生语法错误 ...

  7. The Django Book学习笔记 04 模板

    如果使用这种方法制作文章肯定不是一个好方法,尽管它便于你理解是怎么工作的. def current_datetime(request): now = datetime.datetime.now() h ...

  8. Mybatis-Configuration-详解

    Configuration MyBatis的初始化会执行SqlSessionFactoryBuilder的中build()方法,build方法又会调用XMLConfigBuilder()的内部pars ...

  9. 18.3.2从Class上获取信息(内部类接口等)

    内部类 接口.枚举.注释类型

  10. h5-26-web本地存储

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...