offsetHeight: 元素高，height+border+padding
offsetWidth: 元素宽，width+border+padding
offsetTop: 距离offsetParent顶部的距离
offsetLeft: 距离offsetParent左边的距离
offsetParent: 最近的带有定位的父盒子

scrollHeight: 内容高，不含border
scrollWidth: 内容宽，不含border

scrollTop: 被滚动条卷走的部分
document.documentELement.scrollTop 声明DTD的浏览器
|| document.body.scrollTop; 没声明DTD的浏览器
|| window.pageXOffset; ie9+等标准浏览器

scrollLeft: 被滚动条卷走的部分
document.documentELement.scrollLeft 声明DTD的浏览器
|| document.body.scrollLeft 没声明DTD的浏览器
|| window.pageYOffset; ie9+等标准浏览器

clientHeight: 元素高，height+padding;
clientWidth: 元素宽，width+padding;

window.innerHeight;document.documentElement.clientHeight 可视区域的高
window.innerWidth;document.documentElement.clientWidth; 可视区域的宽
clientTop: 元素的上border宽
clientLeft: 元素的左border宽

event.clientY鼠标距离浏览器可视区域的距离，上

event.clientX鼠标距离浏览器可视区域的距离，左

offset,scroll,client系列的更多相关文章

  1. JavaScript学习笔记5 之 计时器 & scroll、offset、client系列属性 & 图片无缝滚动

    一.计时器 setInterval ( 函数/名称 , 毫秒数 )表示每经过一定的毫秒后,执行一次相应的函数(重复) setTimeout ( 函数/名称 , 毫秒数 ) 表示经过一定的毫秒后,只执行 ...

  2. JavaScript 特效之四大家族（offset/scroll/client/event）

      三大系列:offset.scroll.client 事件对象:event(事件被触动时,鼠标和键盘的状态)(通过属性控制)   三大系列都是以DOM元素节点的属性形式存在的. 类比访问关系,也是以 ...

  3. offset / scroll / client Left / Top

    1.offsetHeight / Width (只读) offsetHeight:表示该元素在垂直方向占用的空间大小,包含元素的高度+上边框高度+下边框高度 offsetWidth:表示该元素在水平方 ...

  4. 三大家族，offset,scroll,client

    1.client 1.1主要成员 1.clientWidth 获取网页可视区域宽度(两种用法)    clientHeight 获取网页可视区域高度 (两张用法) 盒子调用: 指盒子本省 浏览器调用: ...

  5. offset系列,client系列,scroll系列回顾

    一 scroll系列属性      ——滚动

  6. offset系列、scroll系列与client系列

    offset系列: offsetLeft:获取元素距离最左边的距离,自身的margin包括在内,不包括自身的border offsetTop:获取元素距离最上边的距离,自身的margin包括在内,不包 ...

  7. 元素的属性：client系列，scroll系列，offset系

    元素的属性 div.attributes 是所有标签属性构成的数组集合 dir.classList 是所有class名构成的数组集合 在classList的原型链上看一看到从 add()和remove ...

  8. client , offset , scroll 系列 及百度导航栏案例

    1. client 系列 示例 : <!DOCTYPE html> <html> <head> <meta charset="UTF-8" ...

  9. client系列、offset系列、scroll系列

    一.client系列 clientWidth/clientHeight    是我们设置的宽和高加上内边距(没有边框) clientLeft/clientTop 就是我们设置的边框值 二.offset ...

随机推荐

  1. Qt笔记——元对象系统

    Qt元对象系统提供了对象间的通信机制:信号和槽.以及执行类形信息和动态属性系统的支持.是标注C++的一个扩展,它使得Qt可以更好的实现GUI图形用户界面编程.Qt的元对象系统不支持C++模板.虽然模板 ...

  2. ibatis常用的集中判断语句

    http://blog.csdn.net/liaomin416100569/article/details/5344483

  3. 一个由正则表达式引发的血案 vs2017使用rdlc实现批量打印 vs2017使用rdlc [asp.net core 源码分析] 01 - Session SignalR sql for xml path用法 MemCahe C# 操作Excel图形——绘制、读取、隐藏、删除图形 IOC,DIP,DI,IoC容器

    1. 血案由来 近期我在为Lazada卖家中心做一个自助注册的项目,其中的shop name校验规则较为复杂,要求:1. 英文字母大小写2. 数字3. 越南文4. 一些特殊字符,如“&”,“- ...

  4. tcp/ip --IP：网际协议

    1.概述      IP是TCP/IP协议族中最为核心的协议.所有的TCP,UDP,ICMP,IGMP数据都以IP数据报格式传输.      IP提供不可靠,无连接的数据报传送服务. 不可靠:它不能保 ...

  5. [原创]FreeSWITCH实现多人来电思路

    [原创]FreeSWITCH实现多人来电思路 场景介绍 该篇文章主要用于介绍如何使用FreeSWITCH实现通讯系统中常见的多人来电功能. 具体场景如下: A与B正在通话中,此时C拨打A/B,Free ...

  6. TensorFlow学习笔记 速记2 报错：failed call to cuDevicePrimaryCtxRetain: CUDA_ERROR_INVALID_DEVICE

    版本: tensorflow-gpu 原因: 在创建session时没有使用我想让它用的gpu 解决方案: 1. 在python程序中: import os os.environ["CUDA ...

  7. LwIP协议栈（２）：网络接口

    在LwIP中,物理网络硬件接口结构保存在一个全局链表中,它们通过结构体中的 next 指针连接. struct netif { /// pointer to next in linked list * ...

  8. 因DataTable的字段值为DBNull引发的异常

    1 问题重现 (1)新建项目DBNullExp.项目属性为"控制台应用程序": (2)在项目下新建数据集Schools(数据集文件的后缀名为.xsd): watermark/2/t ...

  9. 657. Judge Route Circle【easy】

    657. Judge Route Circle[easy] Initially, there is a Robot at position (0, 0). Given a sequence of it ...

  10. java - day11 - OverRideTest

    概念 1.重写:看调用方法的对象:如果调用的是子类对象,则无论父类/子类引用类型,调用的都是重写后的方法,如果想调用父类的方法,用super.方法 来调:如果调用的是父类对象,则调用的是父类重写前的方 ...