JS获取页面窗口大小的代码解读

 更新时间:2011年12月01日 23:41:23   作者:  
本节实例给出一个获取浏览器当前窗口大小的方法。当浏览器窗口大小变化时,显示的值会随时变化
本节代码主要使用了Document对象关于窗口的一些属性,这些属性的主要功能和用法如下。
要得到窗口的尺寸,对于不同的浏览器,需要使用不同的属性和方法:若要检测窗口的真实尺寸,在Netscape下需要使用Window的属性;在IE下需要深入Document内部对body进行检测;在DOM环境下,若要得到窗口的尺寸,需要注意根元素<html>的尺寸,而不是<body>元素。
Window对象的innerWidth属性包含当前窗口的内部宽度。Window对象的innerHeight属性包含当前窗口的内部高度。
Document对象的body属性对应HTML文档的<body>标签。Document对象的documentElement属性则表示 HTML文档的根节点。
document.body.clientHeight表示HTML文档所在窗口的当前高度。document.body. clientWidth表示HTML文档所在窗口的当前宽度。
复制代码 代码如下:

<!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中length属性的探索

    javascript中length属性的探索

    本文中,我将会通过类数组对象(array like object),探索javascript中的length属性的一些秘密。
    2011-07-07
  • 微信小程序使用第三方库Immutable.js实例详解

    微信小程序使用第三方库Immutable.js实例详解

    Immutable 是 Facebook 开发的不可变数据集合。不可变数据一旦创建就不能被修改,是的应用开发更简单,允许使用函数式编程技术,比如惰性评估。微信小程序无法直接使用Immutable.js,下面就来说说微信小程序如何使用第三方库Immutable.js。
    2016-09-09
  • Bootstrap每天必学之按钮(一)

    Bootstrap每天必学之按钮(一)

    Bootstrap每天必学之按钮,本文讲解的就是大家最为常用的button按钮的样式,感兴趣的小伙伴们可以参考一下
    2015-11-11
  • 基于JS代码实现简单易用的倒计时 x 天 x 时 x 分 x 秒效果

    基于JS代码实现简单易用的倒计时 x 天 x 时 x 分 x 秒效果

    这篇文章主要介绍了基于JS代码实现简单易用的倒计时 x 天 x 时 x 分 x 秒效果,需要的朋友可以参考下
    2017-07-07
  • Bootstrap fileinput文件上传预览插件使用详解

    Bootstrap fileinput文件上传预览插件使用详解

    这篇文章主要为大家详细介绍了Bootstrap fileinput文件上传预览插件的使用方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-05-05
  • Bootstrap 模态框(Modal)插件代码解析

    Bootstrap 模态框(Modal)插件代码解析

    Bootstrap 模态框(Modal)插件 模态框(Modal)是覆盖在父窗体上的子窗体。这篇文章主要介绍了Bootstrap 模态框(Modal)插件代码解析的相关资料,需要的朋友可以参考下
    2016-12-12
  • layui table 多行删除(id获取)的方法

    layui table 多行删除(id获取)的方法

    今天小编就为大家分享一篇layui table 多行删除(id获取)的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-09-09
  • javascript实现英文首字母大写

    javascript实现英文首字母大写

    本文给大家总结了几种可以实现英文首字母大写的javascript脚本,另附上一个CSS的实现方法,非常的简单实用,这里推荐给大家,有需要的小伙伴可以参考下。
    2015-04-04
  • javaScript动态添加Li元素的实例

    javaScript动态添加Li元素的实例

    下面小编就为大家分享一篇javaScript动态添加Li元素的实例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-02-02
  • 简单实现js菜单栏切换效果

    简单实现js菜单栏切换效果

    这篇文章主要教大家如何简单实现js菜单栏切换效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-03-03

最新评论