javascript获取和判断浏览器窗口、屏幕、网页的高度、宽度等


Posted in Javascript onMay 08, 2014

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.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

技术要点

本节代码主要使用了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文档所在窗口的当前宽度。

示例代码

<!DOCTYPE>
<html>
    <head>
        <title>
            请调整浏览器窗口
        </title>
        <meta charset="utf8">
    </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 相关文章推荐
自己的js工具 Cookie 封装
Aug 21 Javascript
javascript json2 使用方法
Mar 16 Javascript
jquery实现奇偶行赋值不同css值
Feb 17 Javascript
JavaScript调用后台的三种方法实例
Oct 17 Javascript
用javascript删除当前行,添加行(示例代码)
Nov 25 Javascript
javascript常用函数归纳整理
Oct 31 Javascript
谈谈encodeURI和encodeURIComponent以及escape的区别与应用
Nov 24 Javascript
JavaScript实现各种排序的代码详解
Aug 28 Javascript
JS实现的倒计时恢复按钮点击功能【可用于协议阅读倒计时】
Apr 19 Javascript
分享JS表单验证源码(带错误提示及密码等级)
Jan 05 Javascript
JS FormData对象使用方法实例详解
Feb 12 Javascript
微信小程序入门之绘制时钟
Oct 22 Javascript
jquery mobile的触控点击事件会多次触发问题的解决方法
May 08 #Javascript
javascript操作excel生成报表示例
May 08 #Javascript
jquery的ajax跨域请求原理和示例
May 08 #Javascript
Javascript单元测试框架QUnitjs详细介绍
May 08 #Javascript
javascript与有限状态机详解
May 08 #Javascript
ajax提交表单实现网页无刷新注册示例
May 08 #Javascript
JavaScript怎么判断图片是否加载完成以便获取其尺寸
May 08 #Javascript
You might like
Sorting Array Values in PHP(数组排序)
2011/09/15 PHP
怎样使用php与jquery设置和读取cookies
2013/08/08 PHP
php简单解析mysqli查询结果的方法(2种方法)
2016/06/29 PHP
php微信公众平台开发之微信群发信息
2016/09/13 PHP
PHP编程文件处理类SplFileObject和SplFileInfo用法实例分析
2017/07/22 PHP
PHP回调函数概念与用法实例分析
2017/11/03 PHP
php通过pecl方式安装扩展的实例讲解
2018/02/02 PHP
javascript 火狐(firefox)不显示本地图片问题解决
2008/07/05 Javascript
Jquery常用技巧收集整理篇
2010/11/14 Javascript
Node.js:Windows7下搭建的Node.js服务(来玩玩服务器端的javascript吧,这可不是前端js插件)
2011/06/27 Javascript
javascript实现tabs选项卡切换效果(扩展版)
2013/03/19 Javascript
Angular中的Promise对象($q介绍)
2015/03/03 Javascript
javascript断点调试心得分享
2016/04/23 Javascript
30分钟快速掌握Bootstrap框架
2016/05/24 Javascript
微信小程序 Toast自定义实例详解
2017/01/20 Javascript
D3.js进阶系列之CSV表格文件的读取详解
2017/06/06 Javascript
浅析Angular19 自定义表单控件
2018/01/31 Javascript
详解Vue项目在其他电脑npm run dev运行报错的解决方法
2018/10/29 Javascript
基于iview-admin实现动态路由的示例代码
2019/10/02 Javascript
vue和iview实现Scroll 数据无限滚动功能
2019/10/31 Javascript
JS中准确判断变量类型的方法
2020/06/01 Javascript
用Python中的__slots__缓存资源以节省内存开销的方法
2015/04/02 Python
Python调用C++程序的方法详解
2017/01/24 Python
python中pandas.DataFrame的简单操作方法(创建、索引、增添与删除)
2017/03/12 Python
python的文件操作方法汇总
2017/11/10 Python
python-itchat 获取微信群用户信息的实例
2019/02/21 Python
使用python-opencv读取视频,计算视频总帧数及FPS的实现
2019/12/10 Python
python dir函数快速掌握用法技巧
2020/12/09 Python
深入理解css属性的选择对动画性能的影响
2016/04/20 HTML / CSS
戴森台湾线上商城:Dyson Taiwan
2018/05/21 全球购物
应用化学专业职业生涯规划书
2014/01/22 职场文书
合伙协议书范本
2014/04/21 职场文书
提取视频中的音频 Python只需要三行代码!
2021/05/10 Python
解析CSS 提取图片主题色功能(小技巧)
2021/05/12 HTML / CSS
JavaScript利用html5新方法操作元素类名详解
2021/11/27 Javascript
windows安装 redis 6.2.6最新步骤详解
2022/04/26 Redis