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. NOIP2005题解

    传送门 考查题型 dp 模拟 贪心 T1 谁拿了最多的奖学金 题目描述 某校的惯例是在每学期的期末考试之后发放奖学金.发放的奖学金共有五种,获取的条件各自不同: 1) 院士奖学金,每人8000元,期末 ...

  2. [laravel]要点

    1. routing 2. Ioc 3. Facade 4. Artisan 1.routing 参考:http://laravel.com/docs/4.2/routing 了解routing之前先 ...

  3. C++实现利用（前序和中序生成二叉树）以及（二叉树的镜像）

    #include<iostream> #include<string.h> #include<stack> using namespace std; typedef ...

  4. 把文件类型转化为byte[]

    转自:https://blog.csdn.net/xinxiqi/article/details/78899159 package com.sanqing.util; import java.io.B ...

  5. View Programming Guide for iOS ---- iOS 视图编程指南(五)---Animations

      Animations Animations provide fluid visual transitions between different states of your user inter ...

  6. 洛谷 - P2774 - 方格取数问题 - 二分图最大独立点集 - 最小割

    https://www.luogu.org/problemnew/show/P2774 把两个相邻的节点连边,这些边就是要方便最小割割断其他边存在的,容量无穷. 这种类似的问题的话,把二分图的一部分( ...

  7. K

    https://codeforces.com/gym/101982/attachments K 打表暴力 /*#include<bits/stdc++.h> using namespace ...

  8. Cg（C for Graphic）语言表达式与控制语句（转）

    摘抄“GPU Programming And Cg Language Primer 1rd Edition” 中文名“GPU编程与CG语言之阳春白雪下里巴人” 在上一章中,我们已经介绍了 Cg 语言的 ...

  9. poj 3734 Blocks【指数型生成函数】

    指数型生成函数,推一推可得: \[ (1+\frac{x^1}{1!}+\frac{x^2}{2!}+\frac{x^3}{3!}+...)^2+(1+\frac{x^2}{2!}+\frac{x^4 ...

  10. poj 3648 Wedding【2-SAT+tarjan+拓扑】

    看错题*n,注意是输出新娘这边的-- 按2-SAT规则连互斥的边,然后注意连一条(1,1+n)表示新娘必选 然后输出color[belong[i]]==color[belong[1+n(新娘)]]的点 ...