js中scrollLeft、scrollWidth、offsetTop等相关位置属性的理解(转)
1.常见的事件位置属性
e.pageX——相对整个页面的坐标
注意:IE6、IE7、IE8无该属性
e.layerX——相对当前坐标系的border左上角开始的坐标
注意:在opera、IE6、IE7、IE8中这个属性,而IE8以上表示相对当前坐标系的border左上角开始的坐标 + 滚动条滚过的距离
e.offsetX——相对当前坐标系的border左上角开始的坐标
注意:火狐中无该属性
e.clientX——相对可视区域的坐标
e.x——相对可视区域的坐标
注意:火狐中无该属性
2.pageX和clientX
pageX指鼠标在页面上的位置,以页面左侧为参考点
clientX指可视区域内离左侧的距离,以滚动条滚动到的位置为参考点。各个浏览器相同。
即当有滚动条时clientX 小于 pageX
//ie6、7、8不识别pageX
PageY=clientY+scrollTop-clientTop;(只讨论Y轴,X轴同理,下同)
页面上的位置=可视区域位置+页面滚动条切去高度-自身border高度
3.screenX
鼠标在屏幕中的位置,指的是鼠标到电脑屏幕左侧的距离。 各个浏览器相同。
与clientX的区别是clientX是到浏览器的距离。
例如:当网页缩小,拖动到屏幕中间时,screnX 大于 clientX
4、offsetX和layerX
为了兼容浏览器,layerX是FF、chrome识别,offsetX是除了FF之外。
如果触发元素设置了position,则offsetX等于layerX
如果页面有滚动条,添加滚动的距离。
layerX:FF特有,是相对于父元素的位置,鼠标相对于“触发事件的元素的层级关系中离该元素最近的,设置了positio的父元素”的边界的位置,从border的左上角开始定位,即如果这个父元素存在border,则坐标原点在border的左上角,而不是内容区域的左上角。
offsetX:IE特有,鼠标相对于“触发事件的元素”的位置,从内容区域左上角开始定位,不是从border左上角开始!这个属性比较好用,用来判断鼠标点在一个元素中的哪个位置很方便,FF没有直接替换的属性。
5.e.x
到可视区域的距离,FF不识别,有无滚动条相同,同clientX。
opera,chrome和safari的event.x返回值和event.clientX相同。
IE8、9、10的event.x返回值和event.clientX相同。
ie7的e.x比e.clientX少2px。
注意:以上仅以X为例,有X的属性就有对应的Y属性,例如:e.pageX和e.pageY,他们是成对存在的。
6.offset详解
scrollHeight: 获取对象的滚动的高度。
scrollWidth:获取对象的滚动的宽度
scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离,即被卷起的宽度
scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离,即被卷起的高度
offsetHeight:获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度(包括border),即对象本身高+border上下宽度
offsetWidth:获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的宽度(包括border),即对象本身宽度+border左右宽度
offsetLeft:获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置,即相对于父元素的左位移
offsetTop:获取对象相对于版面或由 offsetTop 属性指定的父坐标的计算顶端位置,即相对于父元素的上位移
event.clientX: 相对文档的水平座标,即相对于可视区域的水平坐标
event.clientY: 相对文档的垂直座标,即相对于可视区域的垂直坐标
event.offsetX: 相对容器的水平坐标,即相对于父元素的水平坐标
event.offsetY: 相对容器的垂直坐标,即相对于父元素的垂直坐标
clientWidth:对象相对于网页可见区域的宽度
clientHeight:对象相对于网页可见区域的高度
js中scrollLeft、scrollWidth、offsetTop等相关位置属性的理解(转)的更多相关文章
- js中clientWidth, scrollWidth, innerWidth, outerWidth,offsetWidth的区别
js中clientWidth, scrollWidth, innerWidth, outerWidth,offsetWidth的属性汇总,测试浏览器:ie7~ie11.chrome 和 firefox ...
- JS中的prototype、__proto__与constructor属性
作为一名前端工程师,必须搞懂JS中的prototype.__proto__与constructor属性,相信很多初学者对这些属性存在许多困惑,容易把它们混淆,本文旨在帮助大家理清它们之间的关系并彻底搞 ...
- js中的各种宽高以及位置总结
在javascript中操作dom节点让其运动的时候,常常会涉及到各种宽高以及位置坐标等概念,如果不能很好地理解这些属性所代表的意义,就不能理解js的运动原理,同时,由于这些属性概念较多,加上浏览器之 ...
- js中的如何定位固定层的位置
需要获取一些HTML的对象的坐标来更灵活的设置目标层的坐标,这里可以通过用到document.body.scrollTop等属性,但是这些属性在xhtml的标准网页中或更简单的说就是带<!DOC ...
- jQuery UI =>jquery-ui.js中sortable方法拖拽对象位置偏移问题
今天要处理sortable方法处理的对象,拖拽的时候,位置偏移的问题. 按理应该是鼠标在哪,对象就跟着在哪的 百度了一下问题,http://blog.csdn.net/samed/article/de ...
- 详解JS中DOM 元素的 attribute 和 property 属性
一.'表亲戚':attribute和property 为什么称attribute和property为'表亲戚'呢?因为他们既有共同处,也有不同点. attribute 是 dom 元素在文档中作为 h ...
- JS中的实例方法、静态方法、实例属性、静态属性
一.静态方法与实例方法的例子: 我们先来看一个例子来看一下JS中的静态方法和实例方法到底是什么? 静态方法: function A(){} A.col='red' //静态属性 A.sayMeS=f ...
- Js中关于构造函数,原型,原型链深入理解
在 ES6之前,在Javascript不存在类(Class)的概念,javascript中不是基于类的,而是通过构造函数(constructor)和原型链(prototype chains)实现的.但 ...
- JS中对象的定义及相关操作
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...
随机推荐
- javascript 省市二级联动
通过遍历二维数组 获取到 二级列表的 每个option 然后onchange事件 获取到省,然后循环遍历该省具有的市并将遍历到的市添加到id为city的选择器中. 获取完需要清空二级列表的内容,不然不 ...
- 网络请求失败记录(安卓4g网络下第一次请求特别慢或者失败)
最近app的一次版本上线以后出现4g网络下请求接口特别慢,第一次调用接口非常非常慢或者直接访问失败,后面就正常了,但是WiFi情况下并不会出现这个问题.最主要的是IOS的线上app并没有问题. 开始怀 ...
- Akka 和 μJavaActors入门
Akka和μJavaActorsμJavaActors均是java的Actor库,其中Akka提供了叫为完整的Actor开发框架,较为庞大,学习成本很高,μJavaActors 是一个轻量级 ...
- luogu P1304 哥德巴赫猜想
题目描述 输入N(N<=10000),验证4~N所有偶数是否符合哥德巴赫猜想. (N为偶数). 如果一个数,例如10,则输出第一个加数相比其他解法最小的方案.如10=3+7=5+5,则10=5+ ...
- 以root用户身份在jenkins中运行shell命令
以下过程是CentOS 1.打开此脚本(使用VIM或其他编辑器): vim /etc/sysconfig/jenkins 2.找到$JENKINS_USER并更改为“root”: $JENKINS_U ...
- Maven项目导入到Eclipse时Build出现the user operation is waiting for building workspace to complete的问题解决
解决办法如下: 1.选择菜单栏的[Project],然后把菜单栏中[Build Automatically]前面的对钩去掉.
- PHP message: PHP Fatal error: require(): Failed opening required
PHP message: PHP Warning: require(/data/wwwroot/blog.sgfoot.com/bootstrap/autoload.php): failed to o ...
- Java 的几种版本
1. Java ME Java ME(Java 2 Micro Edition),是为机顶盒.移动电话和PDA之类嵌入式消费电子设备提供的Java语言平台,包括虚拟机和一系列标准化的Java API. ...
- 【POI】导出xls文件报错:The maximum number of cell styles was exceeded. You can define up to 4000 styles in a .xls workbook
使用POI导出xls文件,由于数据过多,导致导出xls报错如下: The maximum number of cell styles was exceeded. You can define up t ...
- hdu1017(C++)
这个题目很水,但是卡了格式和m=0的情况,wa了好多次,题目只给出N=1,感觉没说清楚 #include<iostream>using namespace std;int main(){ ...