JS中的offset scroll event client
一、offset
一般用来检测盒子的偏移、位移,都是只读属性,不能赋值
- offsetWidth和offsetHeight表示的是:调用者盒子的宽和高,包括盒子自身的padding和border
- offsetTop和offsetLeft是调用者的盒子距离有定位的父盒子顶部和左侧的长度。如果父盒子都没有定位,就以body为准,如果调用者自身没有top和left时,从父盒子的padding开始计算,不包括border
二、scroll
各种特效和动画中用的比较多,表示在页面滑动的过程中,卷起的部分
- scrollWidth和scrollHeight表示的是调用元素的全部宽度和高度,内容超出也会被算入,包括padding,不包括border和margin,即 scrollWidth = width + padding
- scrollTop和scrollLeft表示的是浏览器在滑轮滑动之后,被遮住的顶部和左侧长度
function scroll() {
//判断返回值是不是undefined
if (window.pageXOffset !== undefined) {
return {
"top": window.pageYOffset,
"left": window.pageXOffset
}
}else if (document.documentElement === "CSS1Compat") {
return {
"top": document.documentElement.offsetTop,
"left": document.documentElement.offsetLeft
}
}else {
return {
"top": document.body.offsetTop,
"left": document.body.offsetLeft
}
} // return { //简写
// "top": window.pageYOffset || document.documentElement.offsetTop || document.body.offsetTop,
// "left": window.pageXOffset || document.documentElement.offsetLeft || document.body.offsetLeft
// }
}
有了这样的封装函数就可以更简单的得到元素在页面或浏览器中的位置
var pagey = event.pageY || scroll().top + event.clientY; //后边是兼容性的写法,被遮挡高度 + 元素距浏览器高度这是封装的一个获取scrollTop和scrollLeft的兼容性写法,documentElement调用的是支持DTD,body调用的不支持DTD,pageYoffset方法是谷歌火狐IE9都支持的方法
判断当前是否声明DTD的方法:
document.compatMode === "BackCompat"; //未声明DTD
document.compatMode === "CSS1Compat"; //已声明DTD
三、event
DOM中的事件,而事件处理函数可以附加在DOM、window这些对象上。在事件发生的时候,event对象会被创建并依次传递给事件监听器,之前已经说过创建事件监听器的方法addEventListener() 要注意的是,在IE旧版本里使用的是attchEvent()这种效果相同的方法,也可以以此写出兼容性的写法。
- 在处理函数中,可以将event作为形参传入,来访问一些Event接口,兼容性写法如:
function method(event) {
event = event || window.event;
}还有好多东西等我以后慢慢发掘,现在还不知道这个里边有什么样的奇淫技巧
- 事件传播的三个阶段:
- 捕获:从最上一级往下查找,直到找到目标事件
- 冒泡:从目标事件开始向上层冒泡,直到最上一级
- 目标:执行事件的代码
四、client
clientWidth:盒子的可见宽度,不包括border和margin 故clientWidth = padding + width
clientHeight:同上
clientTop:盒子上边框的border(喵喵喵???)
clientLeft:同上
区别:
clientWidth = width + border
offsetWidth = width + padding + border
scrollWidth = 内容的宽度(不含border)
clientTop:由event事件调用 代表border的宽
offsetTop:由任意元素调用,但一般是盒子 代表此盒子距离有定位的父盒子的距离
scrollTop:由window调用,盒子也可以调用,但要有滚动条 代表被卷去的高度
JS中的offset scroll event client的更多相关文章
- python 全栈开发,Day52(关于DOM操作的相关案例,JS中的面向对象,定时器,BOM,client、offset、scroll系列)
昨日作业讲解: 京东购物车 京东购物车效果: 实现原理: 用2个盒子,就可以完整效果. 先让上面的小盒子向下移动1px,此时就出现了压盖效果.小盒子设置z-index压盖大盒子,将小盒子的下边框去掉, ...
- JS 中的offset、scroll、client总结
经常碰到offset.scroll.client这几个关键字,每次都要各种实验,这里总结一下. 两张图镇楼,随时翻阅 1. offset offset 指偏移,包括这个元素在文档中占用的所有显示宽度, ...
- 关于js中return false、event.preventDefault()和event.stopPropagation()
在平时项目中,如果遇到需要阻止浏览器默认行为,大家经常会用return false;和event.preventDefault()来阻止,但对它俩的区别还是有些一知半解,于是看了文档,查了些资料,在此 ...
- js三大家族offset,scroll,cliennt的区别
offset偏移(返回的是number类型) offsetLeft:返回盒子距离左边的距离 offsetTop:返回盒子距离顶部的距离 offsetHeight:返回盒子的高度,包括border,pa ...
- 20190430-screen、client、offset、scroll等JS中各种宽度距离
参考文献: JavaScript概念之screen/client/offset/scroll/inner/avail的width/left
- python 全栈开发,Day54(关于DOM操作的相关案例,JS中的面向对象,定时器,BOM,client、offset、scroll系列)
04-jQuery的属性操作 jquery的属性操作模块分为四个部分:html属性操作,dom属性操作,类样式操作和值操作 html属性操作:是对html文档中的属性进行读取,设置和移除操作.比如at ...
- javascript中常用坐标属性offset、scroll、client
原文:javascript中常用坐标属性offset.scroll.client 今天在学习js的时候觉得这个问题比较容易搞混,所以自己画了一个简单的图,并且用js控制台里面输出测试了下,便于理解. ...
- JavaScript 特效之四大家族(offset/scroll/client/event)
三大系列:offset.scroll.client 事件对象:event(事件被触动时,鼠标和键盘的状态)(通过属性控制) 三大系列都是以DOM元素节点的属性形式存在的. 类比访问关系,也是以 ...
- JavaScript中的 offset, client,scroll
在js 中我们要用到的 offset, client, scroll 在这我把自己理解的给大家分享一下. offset div.offsetTop 指div距离上方或上层控件的距离,单位像素 div. ...
随机推荐
- Day 07 字符编码,文件操作
今日内容 1.字符编码:人识别的语言与机器识别的语言转换的媒介 2.字符与字节:字符占多少字节,字符串转换 3.文件操作:操作硬盘的一块区域 字符编码 重点:什么是字符编码 人类能识别的字符等高级标识 ...
- Red-Gate.NET.Reflector.v8.0.1.308(内含注册机Keygen与注册图解)
Red-Gate.NET.Reflector.v8.0.1.308(内含注册机Keygen与注册图解) 反编译神器 内含软件安装包.注册机及插件集合. 这里说下注册方法,注意不要在联网的情况下注册 ...
- 知识点:synchronized 原理分析
synchronized 原理分析 1. synchronized 介绍 在并发程序中,这个关键字可能是出现频率最高的一个字段,他可以避免多线程中的安全问题,对代码进行同步.同步的方式其实就是隐式的加 ...
- vmware中的linux虚拟机配置以nat模式上网,并用xshell连接该虚拟机
1. 首先确保宿主机上的vmnet8处于启用状态 2. 以管理员身份运行vmware >> 编辑 >> 虚拟机网络编辑器 >> 选中Vmnet8 >> ...
- 转:通过ASP.Net页面获取域用户名(当前登陆的用户)
通过ASP.Net页面获取域用户名(当前登陆的用户) 原文地址: https://www.cnblogs.com/fast-michael/archive/2011/03/14/2057954.htm ...
- Redis管理:安全/耗时命令日志与命令监控/数据库管理工具
1.安全管理 1)绑定指定IP Redis的安全设计是在“Redis运行在可信环境”这个前提之下的,在生产环境中建议通过应用程序连接Redis.Redis可以配置只接受来自指定IP的的请求,可通过修改 ...
- #161: 给定n*n由0和1组成的矩阵,如果矩阵的每一行和每一列的1的数量都是偶数,则认为符合条件。 你的任务就是检测矩阵是否符合条件
试题描述 给定n*n由0和1组成的矩阵,如果矩阵的每一行和每一列的1的数量都是偶数,则认为符合条件. 你的任务就是检测矩阵是否符合条件,或者在仅改变一个矩阵元素的情况下能否符合条件. "改变 ...
- Java 性能调优工具
CPU使用率工具: vmstat 检查应用性能时,应该首先审查CPU时间.代码优化的目的是提升而不是降低(更短时间段内的)CPU的使用率.在试图深入优化应用前,应该先弄清楚为何CPU使用率低.磁盘使用 ...
- e.getMessage 为空NULL
在日常代码中免不了要try catch 切忌用try catch 去try 整个方法. 在对象操作之前尽量写上if 空判断. 反例: public void send(){ try{ 代码1:获取对象 ...
- openStack 重新resize时会进行重新调度,可能在本机Resize 扩展资源,也可能存在的情况时 ,新扩展的资源在当前节点不足分配,整个虚拟机将进行迁移调度,进行异机迁移时需要迁移 的两台主机间能使用nova系统用户经passless登录
openStack 重新resize时会进行重新调度,可能在本机Resize 扩展资源,也可能存在的情况时 ,新扩展的资源在当前节点不足分配,整个虚拟机将进行迁移调度,进行异机迁移时需要迁移 的两台主 ...