博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
JavaScript计算屏幕上元素位置
阅读量:4558 次
发布时间:2019-06-08

本文共 2110 字,大约阅读时间需要 7 分钟。

鼠标事件的event对象的属性

clientX: 设置或获取鼠标当前位置和浏览器窗口中当前可见区域的最左端之间的距离(不包括页面滚动距离)。

clientY: 设置或获取鼠标当前位置和浏览器窗口中当前可见区域的最顶端之间的距离(不包括页面滚动距离)。

screenX: 设置或获取鼠标当前位置整个电脑屏幕最左端之间的距离(不包括页面滚动距离)。

screenY: 设置或获取鼠标当前位置整个电脑屏幕最顶端之间的距离(不包括页面滚动距离)。

说其他位置信息前先讲一下渲染模式的问题,IE对盒模型的渲染在Standards Mode和Quirks Mode有很大差别,在Standards Mode下对于盒模型的解释和其他的标准浏览器是一样,但在Quirks Mode模式下则有很大差别,而在不声明Doctype的情况下,IE默认又是Quirks Mode。所以为兼容性考虑,我们可能需要获取当前的文档渲染方式[1]。

可以通过下面这个函数获取当前文档元素(从qqbanner摘过来的,请原谅我这偷学者吧) :

function getDocEle() {    return document.compatMode == 'CSS1Compat' ? document.documentElement : document.body;}

准确获取网页当前可视区域的宽高网页的宽高网页滚动的距离 的代码,引自[2]

if(document.compatMode == "BackCompat"){	cWidth = document.body.clientWidth;	cHeight = document.body.clientHeight;	sWidth = document.body.scrollWidth;	sHeight = document.body.scrollHeight;	sLeft = document.body.scrollLeft;	sTop = document.body.scrollTop;}else{ //document.compatMode == "CSS1Compat"	cWidth = document.documentElement.clientWidth;	cHeight = document.documentElement.clientHeight;	sWidth = document.documentElement.scrollWidth;	sHeight = document.documentElement.scrollHeight;	sLeft = document.documentElement.scrollLeft == 0 ? document.body.scrollLeft : document.documentElement.scrollLeft;	sTop = document.documentElement.scrollTop == 0 ? document.body.scrollTop : document.documentElement.scrollTop;}

clientWidth: 浏览器窗口中当前可见区域宽度(即浏览器窗口的宽度),不包滚动条等边线,会随窗口的显示大小改变。

clientHeight: 浏览器窗口中当前可见区域高度(即浏览器窗口的高度),不包滚动条等边线,会随窗口的显示大小改变。

scrollWidth: 是当前网页的实际内容的宽,不包括边线宽度,会随对象中内容的多少改变[3],但不会随当前浏览器窗口的大小改变。

scrollHeight: 是当前网页的实际内容的宽,不包括边线高度,会随对象中内容的多少改变,但不会随当前浏览器窗口的大小改变。

scrollLeft: 浏览器当前水平方向滚动的距离。

scrollTop: 浏览器当前垂直方向滚动的距离。

下面这四个属性,与渲染模式无关。

offsetWidth: 是对象的宽,包括边线宽度,会随对象中内容的多少改变。

offsetHeight: 是对象的宽,包括边线高度,会随对象中内容的多少改变。

offsetLeft: 返回当前元素的左边界到它的包含元素的左边界的偏移量,以像素为单位。一般是对象顶端相对于整个文档的左端的距离,若为绝对定位,且外部有relative元素(注意此元素padding或者border-width大于0时情况),则返回其距离此元素的距离(包括页面滚动的距离,如果页面布局不变,只是滚动滚轮的话,这个值是不变的)。

offsetTop: 返回当前元素的上边界到它的包含元素的上边界的偏移量,以像素为单位。一般是对象顶端相对于整个文档的顶端的距离,若为绝对定位,且外部有relative元素,则返回其距离此元素的距离(同offsetLeft)。

 

 

 

引用文章

[1]

[2]

[3]

转载于:https://www.cnblogs.com/realwall/archive/2011/10/24/2222569.html

你可能感兴趣的文章
11、求二进制中1的个数
查看>>
【nodejs】让nodejs像后端mvc框架(asp.net mvc)一样处理请求--请求处理结果适配篇(7/8)...
查看>>
CodeForces 731A Night at the Museum
查看>>
MySQL 删除数据库
查看>>
JavaScript 字符串(String) 对象
查看>>
How to use VisualSVN Server and TortoiseSVN to host your codes and control your codes' version
查看>>
微信小程序picker组件 - 省市二级联动
查看>>
Dynamics CRM 给视图配置安全角色
查看>>
Eclipse修改已存在的SVN地址
查看>>
(转)使用 python Matplotlib 库绘图
查看>>
进程/线程切换原则
查看>>
正则表达式语法
查看>>
20165301 2017-2018-2 《Java程序设计》第四周学习总结
查看>>
Vue的简单入门
查看>>
urllib 中的异常处理
查看>>
通过SQL Server的扩展事件来跟踪SQL语句在运行时,时间都消耗到哪儿了?
查看>>
比较:I/O成员函数getline() 与 get()(第二种用法)的用法异同
查看>>
7.内部类(一)之详解内部类
查看>>
1.messager消息提示框
查看>>
C teaching
查看>>