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 相关文章推荐
IE DOM实现存在的部分问题及解决方法
Jul 25 Javascript
基于jquery实现的一个选择中国大学的弹框 (数据、步骤、代码)
Jul 26 Javascript
jQuery之ajax技术的详细介绍
Jun 19 Javascript
在页面上用action传递参数到后台出现乱码的解决方法
Dec 31 Javascript
html dom节点操作(获取/修改/添加或删除)
Jan 23 Javascript
JavaScript数组前面插入元素的方法
Apr 06 Javascript
jQuery控制网页打印指定区域的方法
Apr 07 Javascript
使用JS批量选中功能实现更改数据库中的status状态值(批量展示)
Nov 22 Javascript
vue.js实现表格合并示例代码
Nov 30 Javascript
Javasript设计模式之链式调用详解
Apr 26 Javascript
浅谈vue 单文件探索
Sep 05 Javascript
了解javascript中变量及函数的提升
May 27 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
如何把PHP转成EXE文件
2006/10/09 PHP
64位windows系统下安装Memcache缓存
2015/12/06 PHP
WordPress中给媒体文件添加分类和标签的PHP功能实现
2015/12/31 PHP
tp5.1 框架数据库常见操作详解【添加、删除、更新、查询】
2020/05/26 PHP
分享14个很酷的jQuery导航菜单插件
2011/04/25 Javascript
innerText和textContent对比及使用介绍
2013/02/27 Javascript
javascript进行数组追加方法小结
2014/06/16 Javascript
浅谈Jquery核心函数
2015/06/18 Javascript
js基于cookie方式记住返回页面用法示例
2016/05/27 Javascript
浅谈JS中的三种字符串连接方式及其性能比较
2016/09/02 Javascript
jQuery操作复选框(CheckBox)的取值赋值实现代码
2017/01/10 Javascript
js中的触发事件对象event.srcElement与event.target详解
2017/03/15 Javascript
Vue.js中数据绑定的语法教程
2017/06/02 Javascript
js原生代码实现轮播图的实例讲解
2017/07/28 Javascript
Vue Components 数字键盘的实现
2019/09/18 Javascript
小程序如何自主实现拦截器的示例代码
2019/11/04 Javascript
Vue使用JSEncrypt实现rsa加密及挂载方法
2020/02/07 Javascript
springboot+vue+对接支付宝接口+二维码扫描支付功能(沙箱环境)
2020/10/15 Javascript
Vue3+elementui plus创建项目的方法
2020/12/01 Vue.js
在pycharm中python切换解释器失败的解决方法
2018/10/29 Python
如何利用Boost.Python实现Python C/C++混合编程详解
2018/11/08 Python
Python 实现顺序高斯消元法示例
2019/12/09 Python
Pycharm 2020最新永久激活码(附最新激活码和插件)
2020/09/17 Python
opencv python在视屏上截图功能的实现
2020/03/05 Python
HTML5实现文件断点续传的方法
2017/01/04 HTML / CSS
几个人围成一圈的问题
2013/09/26 面试题
【魔兽争霸3重制版】原版画面与淬火MOD画面对比
2021/03/26 魔兽争霸
个人简历自我评价
2014/02/02 职场文书
淘宝活动策划方案
2014/02/06 职场文书
2014两会学习心得:时代的发展
2014/03/17 职场文书
大学竞选班长演讲稿
2014/04/24 职场文书
入党积极分子批评与自我批评思想汇报
2014/09/14 职场文书
浅谈MySQL表空间回收的正确姿势
2021/10/05 MySQL
Vue.js中v-bind指令的用法介绍
2022/03/13 Vue.js
Java 超详细讲解hashCode方法
2022/04/07 Java/Android
mysql查找连续出现n次以上的数字
2022/05/11 MySQL