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. Synchronized之四：Synchronized的可重入性

    本文里面讲的是广义上的可重入锁,而不是单指JAVA下的ReentrantLock. 可重入锁,也叫做递归锁,指的是同一线程外层函数获得锁之后 ,内层递归函数仍然有获取该锁的代码,但不受影响.在JAVA ...

  2. ASP.NET Core：创建一个Core项目

    ylbtech-ASP.NET Core:创建一个Core项目 1.返回顶部 1. 2. 3. 4.         5. 2.返回顶部 1.新建Razor页面 2. 3. 4.Abc 4.1.Abc ...

  3. bzoj4556

    后缀自动机+二分+倍增+线段树合并 后缀自动机真好用 后面一个串是固定的,那么我们要对前面的串进行一些操作.我们想既然是求lcp,那么我们得先翻转原串,这样前缀变成了后缀,然后二分一下,从d在自动机上 ...

  4. 数据连接池使用方法 JADI

    1.编写context.xml 文件复制到 WebRoot/META_INF/context.xml <?xml version='1.0' encoding='utf-8'?> < ...

  5. k8s-helm-二十四

    一.介绍 Helm是Kubernetes的一个包管理工具,用来简化Kubernetes应用的部署和管理.可以把Helm比作CentOS的yum工具. yum不光要解决包之间的依赖关系,还要提供具体的程 ...

  6. pl/sql developer中如何导出oracle数据库结构? 参考文章一

    本文作者来自csdn的xieyuooo地址为 : http://bbs.csdn.net/topics/340209135 进入PL/SQL后,使用如下图所示的操作步骤: 然后会弹出一个窗口,在弹出窗 ...

  7. Android Studio编译开源项目（含NDK开发）常见报错

    1.未设置NDK的路径 Error:Execution failed for task ':library:ndkBuild'. > A problem occurred starting pr ...

  8. Chrome下font-size小于12px的解决办法

    自从Chorme取消了-webkit-text-size-adjust,这个问题又变得令人烦恼起来. 好在我们可以利用-webkit-transform这个私有属性. .box{ -webkit-tr ...

  9. E. Anton and Tree 数组开大点

    http://codeforces.com/contest/734/problem/E 看了题解,缩点 + 树的直径. 然而一直wa14. 注意到, 缩点后重建图,在5的时候,5和6建了一条边,然后6 ...

  10. RHEL 6.5----haproxy实现负载均衡

    主机名 IP master 192.168.30.130 node-1 192.168.30.131 node-2 192.168.30.132 在master上安装 [root@master ~]# ...