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. java类反射

    http://www.cnblogs.com/rollenholt/archive/2011/09/02/2163758.html

  2. face++实现人脸识别

    因为项目是在多年前完毕,face++的sdk可能有调整,所以部分功能可能不再适用(2017.3) 近期做了一个使用face++实现人脸识别的功能.当初看着官方文档一点头绪都没有.看了好久才弄明确.所以 ...

  3. kafka快速开始教程

    此教程假设你刚刚开始没有任何 Kafka 或 ZooKeeper 数据.Kafka的控制台脚本在类Unix和Windows平台不同,Windows平台使用bin\windows\\代替bin/,脚本的 ...

  4. 前端模块化和AMD、CMD规范

    前端模块化和AMD.CMD规范 先看下基础:https://github.com/seajs/seajs/issues/547

  5. 阻塞赋值与非阻塞赋值（verilog篇）

    阻塞赋值与非阻塞赋值(verilog篇) 2017-09-30 竹海 相约电子ee 相信刚刚接触verilog的读者,多少对阻塞赋值和非阻塞赋值仍有一些困惑.笔者在这篇文章,带领大家深入的理解这两者的 ...

  6. dubbo_实现Hessian的远程调用协议

    1.优点 连接个数:多连接 连接方式:短连接 传输协议:HTTP 传输方式:同步传输 序列化:Hessian二进制序列化 适用范围:传入传出参数数据包较大,提供者比消费者个数多,提供者压力较大,可传文 ...

  7. Knockout JS 演示样例

    五个小样例,来自Knockout JS官方站点. //tutorial 1 //following codes uses to demonstrate observable values and ta ...

  8. Android 4.4 全套源代码及子模块源代码的下载方法

    博文<Android源代码下载--用git clone实现单个文件夹下载>介绍了採用git clone方法下载Android单个文件夹源代码的方法,这篇文章已经有四年的历史,这期间Goog ...

  9. Dig HOWTO 中文手册--dig命令使用大全

    Dig HOWTO 中文手册--dig命令使用大全 DNS -- 本人翻译的dig howto手册. 译者序: 可以这样说,翻译本篇文档的过程就是我重新学习DNS的过程,dig命令可以帮助我们学习DN ...

  10. iOS中解析Bonjour服务(转)

    服务器端Bonjour服务发布成功之后,客户端可以通过NSNetService解析服务,解析成功后,可以获得通讯的数据细节,如:IP地址.端口等信息. 首先需要实例化NSNetService对象代码如 ...