博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
关于浏览器和屏幕的坐标大全(经典中的经典)
阅读量:6242 次
发布时间:2019-06-22

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

<body οnclick="Text()">

<script type="text/javascript">  
var strInfo="";
function Text(){
strInfo+=window.event.x; //设置或获取鼠标指针位置相对于父文档的 x 像素坐标
strInfo+="\n"+window.event.y;//设置或获取鼠标指针位置相对于父文档的 y 像素坐标。
strInfo+="<br>"+window.event.clientX;//设置或获取鼠标指针位置相对于窗口客户区域的 x 坐标,其中客户区域不包括窗口自身的控件和滚动条.
strInfo+="\n"+window.event.clientY;//设置或获取鼠标指针位置相对于窗口客户区域的 y坐标,其中客户区域不包括窗口自身的控件和滚动条.
strInfo+="<br>"+window.event.screenX;  //screenX 设置或获取获取鼠标指针位置相对于用户屏幕的 x 坐标。
strInfo+="\n"+window.event.screenY;  //screenX 设置或获取获取鼠标指针位置相对于用户屏幕的 y 坐标。
strInfo+="<br>"+window.event.offsetX;//offsetX 设置或获取鼠标指针位置相对于触发事件的对象的 x 坐标。
strInfo+="\n"+window.event.offsetY;//offsetX 设置或获取鼠标指针位置相对于触发事件的对象的 y坐标。
/*event.clientX返回事件发生时,mouse相对于客户窗口的X坐标,event.X也一样。但是如果设置事件对象的定位属性值为relative,event.clientX不变,而

event.X返回事件对象的相对于本体的坐标。*/

strInfo+="<br>"+document.body.scrollWidth;//上下滚动条高度距离屏幕左端的距离
strInfo+="\n"+document.body.scrollHeight;//屏幕内容距离窗口上端的距离
strInfo+="<br>"+document.body.scrollTop;//网页被卷去的高
strInfo+="\n"+document.body.scrollLeft;//网页被卷去的宽
strInfo+="<br>"+document.body.clientWidth;//网页可见区域的宽度(不会随着鼠标的变化而变化,不包括边框和滚动条);
strInfo+="\n"+document.body.clientHeight;//网页可见区域的高度(不会随着鼠标的变化而变化,不包括边框和滚动条);
strInfo+="<br>"+document.body.offsetWidth;//网页可见区域的高度(不会随着鼠标的变化而变化,包括边框和滚动条);
strInfo+="\n"+document.body.offsetHeight;//网页可见区域的高度(不会随着鼠标的变化而变化,包括边框和滚动条);
strInfo+="<br>"+window.screenTop;//网页正文部分上 有些浏览器要换成window.screenX
strInfo+="\n"+window.screenLeft;//网页正文部分左 有些浏览器要换成window.screenY
strInfo+="<br>"+window.screen.width;//返回屏幕分辨率的宽度
strInfo+="\n"+window.screen.height;//返回屏幕分辨率的高度
strInfo+="<br>"+window.screen.availWidth;//返回屏幕可用工作区的像素宽度(不包括工具栏)
strInfo+="\n"+window.screen.availHeight;//返回屏幕可用工作区的像素的高度(不包括工具栏)

document.write(strInfo);
}
</script>
</body>

转载地址:http://kwpia.baihongyu.com/

你可能感兴趣的文章
《数据分析变革:大数据时代精准决策之道》一1.4 全面看待运营型分析
查看>>
一分钟自我介绍:阿里云CDN
查看>>
《iOS 8开发指南》——第6章,第6.5节实战演练——使用模板Single View Application...
查看>>
【观点】离开了信息化,大数据就是为他人作嫁衣
查看>>
《HTML5+CSS3网页设计入门必读》——1.4 分裂:WHATWG TF
查看>>
《JavaScript核心概念及实践》——第2章 基本概念 2.1 数据类型
查看>>
Linux有问必答:如何修复"fatal error: jsoncpp/json/json.h: No such file..."
查看>>
阿里数据库内核月报:2016年11月
查看>>
简单了解Disruptor(一)
查看>>
编写更好 Bash 脚本的 8 个建议
查看>>
Mavens实战 1.5小结
查看>>
《 硬件创业:从产品创意到成熟企业的成功路线图》——第1章 硬件创业概述 1.1 早期的创客们...
查看>>
《Android游戏开发详解》——第3章,第3.5节继承
查看>>
《Docker生产环境实践指南》——2.6 编排
查看>>
Docker学习(一)
查看>>
云端架美购,精品零距离
查看>>
Java设计模式--享元模式
查看>>
码栈开发手册(五)---可视化方式开发(模块详解--浏览图)
查看>>
每天一个设计模式之装饰者模式
查看>>
基于自定义日志打印的UDAF调试
查看>>