再谈BOM和DOM(6):dom对象及event对象位值计算—如offsetX/Top,clentX
总是会被javascript的event对象的clientX,offsetX,screenX,pageX 弄得头晕,于是决定做个图来区分一下(画得我手那个酸呀。。。。)
event对象位置信息获取
先总结下区别:
event.clientX、event.clientY
鼠标相对于浏览器窗口可视区域的X,Y坐标(窗口坐标),可视区域不包括工具栏和滚动条。IE事件和标准事件都定义了这2个属性
event.pageX、event.pageY
类似于event.clientX、event.clientY,但它们使用的是文档坐标而非窗口坐标。这2个属性不是标准属性,但得到了广泛支持。IE事件中没有这2个属性。
event.offsetX、event.offsetY
鼠标相对于事件源元素(srcElement)的X,Y坐标,只有IE事件有这2个属性,标准事件没有对应的属性。
event.screenX、event.screenY
鼠标相对于用户显示器屏幕左上角的X,Y坐标。标准事件和IE事件都定义了这2个属性
dom元素位置信息获取
client指元素本身的可视内容。不包括overflow被折叠起来的部分,不包括滚动条、border,包括padding
obj.clientWidth = (width + padding) //获取元素的宽度——对象可见的宽度,会随窗口的显示大小改变
obj.clientHeight = (height + padding) //元素的高
clientTop、clientLeft 这两个返回的是元素周围边框的厚度,一般它的值就是0。因为滚动条不会出现在顶部或者左侧
offset 指偏移,包括这个元素在文档中占用的所有显示宽度。比client 多了border。
obj.offsetWidth = width + padding + border //元素的宽度
obj.offsetHeight = border-width*2+padding-top+height+padding-bottom //元素的高度
offsetParent属性返回一个对象的引用,这个对象是距离调用offsetParent的父级元素中最近的(在包含层次中最靠近的),并且是已进行过CSS定位的容器元素。 如果这个容器元素未进行CSS定位, 则offsetParent属性的取值为根元素的引用。
-
如果当前元素的父级元素中没有进行CSS定位(position为absolute/relative),offsetParent为body
-
如果当前元素的父级元素中有CSS定位(position为absolute/relative),offsetParent取父级中最近的元素
obj.offsetLeft //合并后的高度 ,元素相对于父元素获整个版面,由offsetParent 属性指定的父坐标的计算上侧位置
obj.offsetTop //元素相对于父元素的top
如果弹框的宽度(offsetWidth)+距离左边的距离(offsetLeft)大于父元素的宽度,则判断为超出外部元素范围,需要动态改变弹框距离边框的位置
scroll指滚动,包括这个元素没显示出来的实际宽度,包括padding,不包括滚动条、border
scrollWidth 获取对象的滚动宽度,对象的实际宽度;
scrollHeight 获取对象的滚动高度
scrollLeft 已滚动过去的宽度 设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离
scrollTop 设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离
js中getBoundingClientRect
当滚动位置发生了改变,top和left属性值就会随之立即发生变化(因此,它们的值是相对于视口的,而不是绝对的)。如果你需要获得相对于整个网页左上角定位的属性值,那么只要给top、left属性值加上当前的滚动位置(通过window.scrollX和window.scrollY),这样就可以获取与当前的滚动位置无关的值。
转载本站文章《再谈BOM和DOM(6):dom对象及event对象位值计算—如offsetX/Top,clentX》,
请注明出处:https://www.zhoulujun.cn/html/webfront/SGML/xml/2015_1209_353.html
原文地址:https://www.cnblogs.com/zhoulujun/p/15008587.html
- 算法模板——Tarjan强连通分量
- 3211: 花神游历各国
- webpack学习(五)配置详解
- 1131: [POI2008]Sta
- 3172: [Tjoi2013]单词
- WebApiThrottle限流框架使用手册
- webpack学习(六)打包压缩js和css
- 1051: [HAOI2006]受欢迎的牛
- 1572: [Usaco2009 Open]工作安排Job
- 深海中的STL—mt19937
- 探索ASP.NET MVC5系列之~~~4.模型篇---包含模型常用特性和过度提交防御
- POJ1201 Intervals(差分约束)
- 【NLP】十分钟快览自然语言处理学习总结
- MVC5 网站开发之九 网站设置
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法