JS 获取浏览器和屏幕宽高等信息的实现思路及代码


Posted in Javascript onJuly 31, 2013

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

实现代码 <!——————————文件名:30.3.htm——————————>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title>请调整浏览器窗口</title> 
<meta http-equiv="content-type" content="text/html; charset=gb2312"> 
</head> 
<body> 
<h2 align="center">请调整浏览器窗口大小</h2><hr> 
<form action="#" method="get" name="form1" id="form1"> 
<!?显示浏览器窗口的实际尺寸?> 
浏览器窗口 的 实际高度: <input type="text" name="availHeight" size="4"><br> 
浏览器窗口 的 实际宽度: <input type="text" name="availWidth" size="4"><br> 
</form> 
<script type="text/javascript"> 
<!? 
var winWidth = 0; 
var winHeight = 0; 
function findDimensions() //函数:获取尺寸 
{ 
//获取窗口宽度 
if (window.innerWidth) 
winWidth = window.innerWidth; 
else if ((document.body) && (document.body.clientWidth)) 
winWidth = document.body.clientWidth; 
//获取窗口高度 
if (window.innerHeight) 
winHeight = window.innerHeight; 
else if ((document.body) && (document.body.clientHeight)) 
winHeight = document.body.clientHeight; 
//通过深入Document内部对body进行检测,获取窗口大小 
if (document.documentElement && document.documentElement.clientHeight && document.documentElement.clientWidth) 
{ 
winHeight = document.documentElement.clientHeight; 
winWidth = document.documentElement.clientWidth; 
} 
//结果输出至两个文本框 
document.form1.availHeight.value= winHeight; 
document.form1.availWidth.value= winWidth; 
} 
findDimensions(); 
//调用函数,获取数值 
window.onresize=findDimensions; 
//?> 
</script> 
</body> 
</html>

源程序解读

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

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

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

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

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

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

Javascript 相关文章推荐
运用Windows XP附带的Msicuu.exe、Msizap.exe来彻底卸载顽固程序
Apr 21 Javascript
超级24小时弹窗代码 24小时退出弹窗代码 100%弹窗代码(IE only)
Jun 11 Javascript
JavaScript闭包函数访问外部变量的方法
Aug 27 Javascript
非jQuery实现照片散落桌子上,单击放大的LightBox效果
Nov 28 Javascript
从零开始做一个pagination分页组件
Mar 15 Javascript
JavaScript中的FileReader图片预览上传功能实现代码
Jul 24 Javascript
js实现手机web图片左右滑动效果
Dec 29 Javascript
微信小程序实现swiper切换卡内嵌滚动条不显示的方法示例
Dec 20 Javascript
vue使用keep-alive保持滚动条位置的实现方法
Apr 09 Javascript
微信小程序授权登录解决方案的代码实例(含未通过授权解决方案)
May 10 Javascript
基于vue-cli搭建多模块且各模块独立打包的项目
Jun 12 Javascript
JavaScript使用localStorage存储数据
Sep 25 Javascript
javascript获取下拉列表框当中的文本值示例代码
Jul 31 #Javascript
禁用页面部分JavaScript方法的具体实现
Jul 31 #Javascript
jquery 单引号和双引号的区别及使用注意
Jul 31 #Javascript
选择器中含有空格在使用示例及注意事项
Jul 31 #Javascript
在表单提交前进行验证的几种方式整理
Jul 31 #Javascript
cookie.js 加载顺序问题怎么才有效
Jul 31 #Javascript
ie8 不支持new Date(2012-11-10)问题的解决方法
Jul 31 #Javascript
You might like
PHP的substr_replace将指定两位置之间的字符替换为*号
2011/05/04 PHP
php 记录进行累加并显示总时长为秒的结果
2011/11/04 PHP
php校验表单检测字段是否为空的方法
2015/03/20 PHP
laravel 多图上传及图片的存储例子
2019/10/14 PHP
Jquery 表单取值赋值的一些基本操作
2009/10/11 Javascript
jValidate 基于jQuery的表单验证插件
2009/12/12 Javascript
基于jquery的一个图片hover的插件
2010/04/24 Javascript
Javascript面向对象之四 继承
2011/02/08 Javascript
javascript学习笔记(二) js一些基本概念
2012/06/18 Javascript
javascript表单验证和Window详解
2014/12/11 Javascript
jQuery后代选择器用法实例
2014/12/23 Javascript
js实现获取当前时间是本月第几周的方法
2015/08/11 Javascript
jQuery插件编写步骤详解
2016/06/03 Javascript
浅谈JavaScript 数据属性和访问器属性
2016/09/01 Javascript
基于Bootstrap框架实现图片切换
2017/03/10 Javascript
js 获取json数组里面数组的长度实例
2017/10/31 Javascript
详解Vue CLI 3.0脚手架如何mock数据
2018/11/23 Javascript
jquery拖拽自动排序插件使用方法详解
2020/07/20 jQuery
使用React手写一个对话框或模态框的方法示例
2019/04/25 Javascript
python使用datetime模块计算各种时间间隔的方法
2015/03/24 Python
Python选课系统开发程序
2016/09/02 Python
python3.5 + PyQt5 +Eric6 实现的一个计算器代码
2017/03/11 Python
Python文件操作基本流程代码实例
2017/12/11 Python
python使用if语句实现一个猜拳游戏详解
2019/08/27 Python
pandas创建DataFrame的7种方法小结
2020/06/14 Python
使用Python绘制台风轨迹图的示例代码
2020/09/21 Python
Django中和时区相关的安全问题详解
2020/10/12 Python
意大利和国际最佳时尚品牌:Drestige
2019/12/28 全球购物
Athleta官网:购买女士瑜伽服、技术运动服和休闲运动服
2020/11/12 全球购物
自我鉴定书面格式
2014/01/13 职场文书
工作评语大全
2014/04/26 职场文书
学校开学标语
2014/10/06 职场文书
2015学校年度工作总结
2015/05/11 职场文书
2019年家电促销广告语集锦
2019/10/21 职场文书
python第三方网页解析器 lxml 扩展库与 xpath 的使用方法
2021/04/06 Python
JavaScript如何优化逻辑判断代码详解
2021/06/08 Javascript