JS 获取浏览器和屏幕宽高等信息代码


Posted in Javascript onMarch 31, 2014

网页可见区域宽: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 相关文章推荐
textContent在Firefox下与innerText等效的属性
May 12 Javascript
用javascript实现的激活输入框后隐藏初始内容
Jun 29 Javascript
快速解决FusionCharts联动的中文乱码问题
Dec 04 Javascript
鼠标左键单击冲突的问题解决方法(防止冒泡)
May 14 Javascript
CKEditor无法验证的解决方案(js验证+jQuery Validate验证)
May 09 Javascript
详解Vue.js中.native修饰符
Apr 24 Javascript
Vue中使用 setTimeout() setInterval()函数的问题
Sep 13 Javascript
vue 巧用过渡效果(小结)
Sep 22 Javascript
支付宝小程序自定义弹窗dialog插件的实现代码
Nov 30 Javascript
JavaScript console的使用方法实例分析
Apr 28 Javascript
Angular+ionic实现折叠展开效果的示例代码
Jul 29 Javascript
基于JS实现快速读取TXT文件
Aug 25 Javascript
js简单的表格添加行和删除行操作示例
Mar 31 #Javascript
jQuery中选择器小问题(新人难免遇到)
Mar 31 #Javascript
jquery控制display属性为none或block
Mar 31 #Javascript
js原型继承的两种方法对比介绍
Mar 30 #Javascript
详解JavaScript中undefined与null的区别
Mar 29 #Javascript
JQuery解析HTML、JSON和XML实例详解
Mar 29 #Javascript
JavaScript中使用ActiveXObject操作本地文件夹的方法
Mar 28 #Javascript
You might like
国产动画《伍六七》原声大碟大卖,啊哈娱乐引领音乐赋能IP的新尝试
2020/03/08 国漫
destoon整合UCenter图文教程
2014/06/21 PHP
php隐藏IP地址后两位显示为星号的方法
2014/11/21 PHP
两个php日期控制类实例
2014/12/09 PHP
Laravel 5 框架入门(二)构建 Pages 的管理功能
2015/04/09 PHP
完美利用Yii2微信后台开发的系列总结
2016/07/18 PHP
PHP策略模式定义与用法示例
2017/07/27 PHP
PHP判断一个数组是另一个数组子集的方法详解
2017/07/31 PHP
学习YUI.Ext 第六天--关于树TreePanel(Part 1)
2007/03/10 Javascript
AngularJS 依赖注入详解及示例代码
2016/08/17 Javascript
JS 实现导航菜单中的二级下拉菜单的几种方式
2016/10/31 Javascript
Vue项目分环境打包的实现步骤
2018/04/02 Javascript
vue项目中使用lib-flexible解决移动端适配的问题解决
2018/08/23 Javascript
JavaScript实现动态添加、移除元素或属性的方法分析
2019/01/03 Javascript
javascript判断一个变量是数组还是对象
2019/04/10 Javascript
JavaScript将数组转换为链表的方法
2020/02/16 Javascript
JS中FileReader类实现文件上传及时预览功能
2020/03/27 Javascript
Element图表初始大小及窗口自适应实现
2020/07/10 Javascript
Django中实现点击图片链接强制直接下载的方法
2015/05/14 Python
python实现提取百度搜索结果的方法
2015/05/19 Python
Python调用C语言的方法【基于ctypes模块】
2018/01/22 Python
Numpy掩码式数组详解
2018/04/17 Python
利用pandas合并多个excel的方法示例
2019/10/10 Python
超全Python图像处理讲解(多模块实现)
2020/04/13 Python
django 解决自定义序列化返回处理数据为null的问题
2020/05/20 Python
python实现简单贪吃蛇游戏
2020/09/29 Python
灵活运用CSS3特性绘制简易版围棋效果
2016/09/28 HTML / CSS
美国汽车轮胎和轮毂销售网站:Tire Rack
2018/01/11 全球购物
德国户外装备、登山运动和攀岩商店:tapir store
2020/02/12 全球购物
Kendra Scott官网:美国领先的时尚配饰品牌
2020/10/22 全球购物
婚前协议书
2014/04/15 职场文书
结婚保证书范文
2014/04/29 职场文书
股指期货心得体会
2014/09/13 职场文书
幼儿园百日安全活动总结
2015/05/07 职场文书
故意杀人罪辩护词
2015/05/21 职场文书
社会心理学学习心得体会
2016/01/22 职场文书