博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
JS 获取浏览器和屏幕宽高信息
阅读量:5935 次
发布时间:2019-06-19

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

hot3.png

事件坐标:

   事件发生时,鼠标的位置

   相对于屏幕:e.screenX  |  screenY

   相对于文档显示区:e.clientX  |  clientY

   相对于事件绑定的元素:e.offsetX  |  offsetY

 窗口大小:

    1. 完整窗口大小:  window.outerWidth/outerHeight

    2. 文档显示区大小: window.innerWidth/innerHeight

窗口位置: 窗口左上角距屏幕左上角的位置

       window.screenLeft|screenX

       window.screenTop|screenY

     调整:

       moveTo(left,top)

       moveBy(left的增量,top的增量)

 获得屏幕的大小:

       完整大小: screen.width/height

       可用大小: screen.availWidth/availHeight

           去掉任务栏之后的剩余大小

 

 

网页可见区域宽:document.body.clientWidth

网页可见区域高:document.body.clientHeight
网页可见区域宽:document.body.offsetWidth (包括边线的宽)
网页可见区域高:document.body.offsetHeight (包括边线的宽)
网页正文全文宽:document.body.scrollWidth
网页正文全文高:document.body.scrollHeight
网页被卷去的高:document.body.scrollTop
网页被卷去的左:document.body.scrollLeft
网页正文部分上:window.screenTop
网页正文部分左:window.screenLeft
屏幕分辨率的高:window.screen.height
屏幕分辨率的宽:window.screen.width
屏幕可用工作区高度:window.screen.availHeight
屏幕可用工作区宽度:window.screen.availWidth
HTML精确定位:scrollLeft,scrollWidth,clientWidth,offsetWidth
scrollHeight: 获取对象的滚动高度。
scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离
scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离
scrollWidth:获取对象的滚动宽度
offsetHeight:获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度
offsetLeft:获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置
offsetTop:获取对象相对于版面或由 offsetTop 属性指定的父坐标的计算顶端位置
event.clientX 相对文档的水平座标
event.clientY 相对文档的垂直座标
event.offsetX 相对容器的水平坐标
event.offsetY 相对容器的垂直坐标
document.documentElement.scrollTop 垂直方向滚动的值
event.clientX+document.documentElement.scrollTop 相对文档的水平座标+垂直方向滚动的量

IE,FireFox 差异如下:

IE6.0、FF1.06+:

clientWidth = width + padding

clientHeight = height + padding

offsetWidth = width + padding + border

offsetHeight = height + padding + border

IE5.0/5.5:

clientWidth = width - border

clientHeight = height - border

offsetWidth = width

offsetHeight = height

(需要提一下:CSS中的margin属性,与clientWidth、offsetWidth、clientHeight、offsetHeight均无关)  

-------------------

技术要点

本节代码主要使用了Document对象关于窗口的一些属性,这些属性的主要功能和用法如下。

要得到窗口的尺寸,对于不同的浏览器,需要使用不同的属性和方法:若要检测窗口的真实尺寸,在Netscape下需要使用Window的属性;在IE下需要深入Document内部对body进行检测;在DOM环境下,若要得到窗口的尺寸,需要注意根元素的尺寸,而不是元素。

Window对象的innerWidth属性包含当前窗口的内部宽度。Window对象的innerHeight属性包含当前窗口的内部高度。

Document对象的body属性对应HTML文档的标签。Document对象的documentElement属性则表示HTML文档的根节点。

document.body.clientHeight表示HTML文档所在窗口的当前高度。document.body. clientWidth表示HTML文档所在窗口的当前宽度。

转载于:https://my.oschina.net/webcaorui/blog/1573623

你可能感兴趣的文章
悲观锁和乐观锁和gap锁
查看>>
Search Engine
查看>>
支付宝支付之电脑网站支付与SpringMvc整合
查看>>
delphi xe6 让 ListView 在 Android 可回弹[根据龟山阿卍原创修改为xe6版本]
查看>>
HTTP状态码详解
查看>>
简单团队-爬取豆瓣电影TOP250-代码设计规范
查看>>
简单几何(向量旋转+凸包+多边形面积) UVA 10652 Board Wrapping
查看>>
并查集(加权) LA 4487 Exclusive-OR
查看>>
mysql
查看>>
软工概论第十四周总结
查看>>
asp.net 同时执行js事件和代码事件 导出 excel
查看>>
Android混合应用开发之页面跳转
查看>>
java继承后构造函数的继承机制
查看>>
ASP.NET编译执行常见错误及解决方法汇总之一
查看>>
ORACLE 12C RMAN 功能增强
查看>>
JAVA对象的序列化和反序列化
查看>>
NYOJ477A+B Problem III
查看>>
C# 自动运行代码 (创建windows 服务的形式 )
查看>>
Python的几个常用模块
查看>>
WPF柱状图(支持数据库动态更新)
查看>>