js 获取屏幕各种宽高的方法(浏览器兼容)


Posted in Javascript onMay 15, 2013

屏幕的有效宽高:

window.screen.availHeight
window.screen.availWidth

 

网页可见区域宽: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文档所在窗口的当前宽度。

源程序解读

(1)程序首先建立一个表单,包含两个文本框,用于显示窗口当前的宽度和高度,并且,其数值会随窗口大小的改变而变化。

(2)在随后的JavaScript代码中,首先定义了两个变量winWidth和winHeight,用于保存窗口的高度值和宽度值。

(3)然后,在函数findDimensions ( )中,使用window.innerHeight和window.innerWidth得到窗口的高度和宽度,并将二者保存在前述两个变量中。

(4)再通过深入Document内部对body进行检测,获取窗口大小,并存储在前述两个变量中。

(5)在函数的最后,通过按名称访问表单元素,结果输出至两个文本框。

(6)在JavaScript代码的最后,通过调用findDimensions ( )函数,完成整个操作。

Javascript 相关文章推荐
关于JavaScript与HTML的交互事件
Apr 12 Javascript
javascript中自定义对象的属性方法分享
Jul 12 Javascript
jQuery中die()方法用法实例
Jan 19 Javascript
JQuery实现鼠标滚轮滑动到页面节点
Jul 28 Javascript
Vue.js第一天学习笔记(数据的双向绑定、常用指令)
Dec 01 Javascript
详解关于react-redux中的connect用法介绍及原理解析
Sep 11 Javascript
详解vue axios用post提交的数据格式
Aug 07 Javascript
Vue中mintui的field实现blur和focus事件的方法
Aug 25 Javascript
Vue中实现权限控制的方法示例
Jun 07 Javascript
vue通信方式EventBus的实现代码详解
Jun 10 Javascript
vue+elementUI 复杂表单的验证、数据提交方案问题
Jun 24 Javascript
如何在node环境实现“get数据解析”代码实例
Jul 03 Javascript
url参数中有+、空格、=、%、&、#等特殊符号的问题解决
May 15 #Javascript
js判断FCKeditor内容是否为空的两种形式
May 14 #Javascript
JQuery for与each性能比较分析
May 14 #Javascript
禁用键盘上的(全局)指定键兼容iE、Chrome、火狐
May 14 #Javascript
解析使用js判断只能输入数字、字母等验证的方法(总结)
May 14 #Javascript
使用js检测浏览器的实现代码
May 14 #Javascript
Javascript 垃圾收集机制介绍理解
May 14 #Javascript
You might like
php实现批量压缩图片文件大小的脚本
2014/07/04 PHP
thinkphp学习笔记之多表查询
2014/07/28 PHP
jQuery UI Dialog控件中的表单无法正常提交的解决方法
2010/12/19 Javascript
一个挺有意思的Javascript小问题说明
2011/09/26 Javascript
NodeJS url验证(url-valid)的使用方法
2013/11/18 NodeJs
JavaScript Math.ceil() 函数使用介绍
2013/12/11 Javascript
使用jQuery处理AJAX请求的基础学习教程
2016/05/10 Javascript
使用JQuery 加载页面时调用JS的实现方法
2016/05/30 Javascript
微信JSAPI支付操作需要注意的细节
2017/01/10 Javascript
JS 实现 ajax 异步浏览器兼容问题
2017/01/21 Javascript
Javascript实现数组中的元素上下移动
2017/04/28 Javascript
基于Bootstrap的标签页组件及bootstrap-tab使用说明
2017/07/25 Javascript
微信小程序引用公共js里的方法的实例详解
2017/08/17 Javascript
requireJS模块化实现返回顶部功能的方法详解
2017/10/16 Javascript
Angular @HostBinding()和@HostListener()用法
2018/03/05 Javascript
Vue.use源码学习小结
2018/06/20 Javascript
JavaScript使用indexOf()实现数组去重的方法分析
2018/09/04 Javascript
js实现ATM机存取款功能
2020/10/27 Javascript
一些你可能不熟悉的JS知识点总结
2019/03/15 Javascript
JS如何实现封装列表右滑动删除收藏按钮
2020/07/23 Javascript
[01:16:28]DOTA2-DPC中国联赛 正赛 iG vs Magma BO3 第二场 2月23日
2021/03/11 DOTA
Python实现设置windows桌面壁纸代码分享
2015/03/28 Python
pycharm编写spark程序,导入pyspark包的3中实现方法
2019/08/02 Python
Python爬取破解无线网络wifi密码过程解析
2019/09/17 Python
python3 正则表达式基础廖雪峰
2020/03/25 Python
Python实现CAN报文转换工具教程
2020/05/05 Python
python使用建议与技巧分享(一)
2020/08/17 Python
详解基于python的图像Gabor变换及特征提取
2020/10/26 Python
python 实现Harris角点检测算法
2020/12/11 Python
Clarria化妆品官方网站:购买天然和有机化妆品系列
2018/04/08 全球购物
日本订房网站,预订日本星级酒店/温泉旅馆:Relux(支持中文)
2020/01/03 全球购物
优秀学生评语大全
2014/04/25 职场文书
推广普通话演讲稿
2014/05/23 职场文书
超市促销活动总结
2014/07/01 职场文书
2016五一劳动节慰问信
2015/11/30 职场文书
《吃水不忘挖井人》教学反思
2016/02/22 职场文书