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. weka入门

    每天都必须记录自己的一点一滴,不记录下来,过一段时间就会忘记,忘记了就等于没有经历过. 我不能每天这样浑浑噩噩的过下去.我要有计划,有梦想.追求卓越.成就不同. 我今天開始我的学习weka之路.学的时 ...

  2. CS0016: 未能写入输出文件“c:\Windows\Microsoft.NET\Framework\v4.0.30319\Temporary ASP.NET Files\

    解决方法: 1:设置 C:\windows\temp 文件夹安全权限  添加用户 NETWORK SERVICE  写入和读取权限 2:设置 C:\windows\temp 文件夹安全权限  添加用户 ...

  3. jQuery校验 表单验证

    官网地址:http://bassistance.de/jquery-plugins/jquery-plugin-validation jQuery plugin: Validation 使用说明 转载 ...

  4. SpringBoot支持https和http

    1.application.propertites #server.port=8081 server.port: 8443 server.ssl.key-store: classpath:keysto ...

  5. iOS 学习笔记五 【2016年百度地图定位详细使用方法】

    具体介和配置绍在此就不详述了,详情请看百度地图API文档, 在这里具体讲解下,新版百度地图的定位与反地理编码的使用: 1.导入头文件 #import <BaiduMapAPI_Map/BMKMa ...

  6. Android Studio 使用笔记： 重命名和重构

    重命名 选中一个变量名称,菜单才是可用状态.然后可以根据系统给出的建议或者自己重新定义变量名称. 快捷键:Shift + F6 (Windows和Mac都是一样的) 重构 选中需要重构的代码,可以按照 ...

  7. 利用ascx输出knockoutjs的模板

    项目里面的UI模板在一个页面中有2K多行了.需要增加新的UI样式.问题来了.加上js代码,几乎是变成了不可维护的状态.增加和修改都需要用ctrl+f的方式找到对应的模板,然后进行处理.很容易出错.突然 ...

  8. golang解析xml

    解析xml标签或者html标签,都是xml文档格式.要是返回的html标签,可以用第三方依赖库goquery来解析. 下面说下,解析xml标签的格式.直接上代码,代码如下: package main ...

  9. 图像增强之DDE---基于红外图像的数字图像细节增强DDE

    (1)DDE应用背景 (2)DDE算法简介 (3)DDE 实现 (4)DDE 总结和不足 ----------author:pkf -----------------time:2-9 -------- ...

  10. ThinkPHP带表情无限级评论回复

    今天就tp中(含表情)无限级评论回复做一个个人总结. 1.准备TP基本框架 2.数据库,数据表的建立 A.先说说数据库(表)的建立. a-1,数据库:blog a-2,数据表:bolg_comment ...