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. C#中怎样将List&lt;自己定义&gt;转为Json格式 及相关函数-DataContractJsonSerializer

    对C#和.net使用List<自己定义>和Json格式相互转化的方法进行总结 关于JSON的入门介绍见http://www.json.org/ ,或者百度,这里不赘述,只是通过以下的样例会 ...

  2. atitit.atiLinq v2新特性attilax大总结 q326

    atitit.atiLinq v2新特性attilax大总结 q326 1. V3规划 (分开sql2obj sql2sql sql2xml)1 2. V2新特性 Url linq的定义1 3. V1 ...

  3. Atitit.js this错误指向window的解决方案

    Atitit.js this错误指向window的解决方案 1.1. 出现地点and解决之道1 1.2. call,apply和bind这三个方法2 1.2.1. Function.prototype ...

  4. 知也atitit.解决struts2 SpringObjectFactory.getClassInstance NullPointerException  v2 q31无涯 - I

    atitit.解决struts2 SpringObjectFactory.getClassInstance NullPointerExceptionv2 q31 1. #--现象 java.lang. ...

  5. dos指令 批处理文件

    windows下开发的时候难免写一些脚本,脚本的调用又难以避免的写批处理文件,也就是(.bat)文件!这个文件是什么呢?其实就是以下的这些dos命令.以下是从网上摘抄的,留以记录,待以后需要时查阅.也 ...

  6. Angularjs学习笔记6_table1

    <!DOCTYPE html><html lang="en" ng-app="plunker"><head>    < ...

  7. __attribute__系列之介绍篇

    1.什么是__attribute__? __attribute__机制是GNU C的一大特色,它可以设置函数属性.变量属性和类型属性等.可以通过它们向编译器提供更多数据,帮助编译器执行优化等. 2._ ...

  8. java 无状态和有状态区别

     诸位Java程序员,想必大家对SimpleDateFormat并不陌生.不过,你是否知道,SimpleDateFormat不是线程安全的(thread safe).这意味着,下面的代码是错误的: ...

  9. HDU高精度总结（java大数类）

      HDU1002   A + B Problem II [题意]大数相加 [链接]http://acm.hdu.edu.cn/showproblem.php?pid=1002 Sample Inpu ...

  10. mysql 数据库复制表 create table city1 like city;

    -- 只复制表结构 create table city1 like city; INSERT INTO test2 SELECT * FROM test; -- 上面的表必须存在 -- 复制整张表的数 ...