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. ...
随机推荐
- Python输入语句
什么是输入 咱们在银行ATM机器前取钱时,肯定需要输入密码,对不? 那么怎样才能让程序知道咱们刚刚输入的是什么呢?? 大家应该知道了,如果要完成ATM机取钱这件事情,需要先从键盘中输入一个数据,然后用 ...
- 防爆等级介绍 - IP65防爆等级和dIIBT4防爆等级的有什么区别?
IP65 IP是Ingress Protection的缩写,IP等级是针对电气设备外壳对异物侵入的防护等级,如:防爆电器,防水防尘电器,来源是国际电工委员会的标准IEC 60529,这个标准在2004 ...
- Azure CosmosDB (1) 概述
<Windows Azure Platform 系列文章目录> Azure CosmosDB是一个全球分布式数据库服务(Global Distributed Database),提供低延迟 ...
- python3学习笔记七(字典)
参照http://www.runoob.com/python3/python3-dictionary.html 字典 字典是另一种可变容器模型,且可以存储任意类型对象. dict1 = {key1:v ...
- centos7 源码安装redis
安装3.x [root@node1 ~]# yum install wget gcc-c++ make [root@node1 ~]# wget http://download.redis.io/re ...
- C# 栈 、队列的概念
栈: 也是System.Collections下的数据结构 存储依然是Object类型的对象 Stack 名字 = new Stack(); Count:实际拥有的元素个数 栈的释放顺序是先进后出(后 ...
- 深入了解scanf()/getchar()和gets()/cin等函数
转:http://www.cnblogs.com/FCWORLD/archive/2010/12/04/1896511.html 转:问题描述一:(分析scanf()和getchar()读取字符) s ...
- mybatis 注解形式设置批量新增、批量更新数据
1. 批量更新: @Update({"<script>" + "<foreach collection=\"smsConfigTemplate ...
- [Oracle,2018-03-02] oracle一次插入多条记录
insert into student(name,age) ' from dual union all ' from dual union all ' from dual 在oracle中不能像mys ...
- Java 虚拟机面试题全面解析(干货)
Java 虚拟机面试题全面解析(干货) JDK 是什么 JRE 是什么 Java历史版本的特性 Java Version SE 50 Java Version SE 6 Java Version SE ...