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.elementGetStyle(element, style)应用示例
Sep 24 Javascript
分享一款基于jQuery的视频播放插件
Oct 09 Javascript
jQuery fadeOut 异步实例代码详解
Aug 18 Javascript
详解基于Angular4+ server render(服务端渲染)开发教程
Aug 28 Javascript
Vue用v-for给src属性赋值的方法
Mar 03 Javascript
Vue波纹按钮组件制作
Apr 30 Javascript
浅谈JS对象添加getter与setter的5种方法
Jun 09 Javascript
JS获取子节点、父节点和兄弟节点的方法实例总结
Jul 06 Javascript
JavaScript实现学生在线做题计时器功能
Dec 05 Javascript
JS实现移动端双指缩放和旋转方法
Dec 13 Javascript
javascript利用键盘控制小方块的移动
Apr 20 Javascript
canvas 中如何实现物体的框选
Aug 05 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
动易数据转成dedecms的php程序
2007/04/07 PHP
PHP通过iconv将字符串从GBK转换为UTF8字符集
2011/07/18 PHP
php使用curl访问https示例分享
2014/01/17 PHP
PHP获取当前完整URL地址的函数
2014/12/21 PHP
php实现面包屑导航例子分享
2015/12/19 PHP
php表单处理操作
2017/11/16 PHP
PHP生成(支持多模板)二维码海报代码
2018/04/30 PHP
PHP实现的DES加密解密类定义与用法示例
2020/11/02 PHP
php面向对象重点知识分享
2019/09/27 PHP
[原创]提供复制本站内容时出现,该文章转自脚本之家等字样的js代码
2007/03/27 Javascript
简洁Ajax函数处理(示例代码)
2013/11/15 Javascript
jQuery购物车插件jsorder用法(支持后台处理程序直接转换成DataTable处理)
2016/06/08 Javascript
浅谈JS运算符&amp;&amp;和|| 及其优先级
2016/08/10 Javascript
Bootstrap幻灯片轮播图支持触屏左右手势滑动的实现方法
2016/10/13 Javascript
Angular的模块化(代码分享)
2016/12/26 Javascript
vue2.0实现分页组件的实例代码
2017/06/22 Javascript
Node层模拟实现multipart表单的文件上传示例
2018/01/02 Javascript
node.js自动上传ftp的脚本分享
2018/06/16 Javascript
angular 组件通信的几种实现方式
2018/07/13 Javascript
vue组件暴露和.js文件暴露接口操作
2020/08/11 Javascript
NestJs使用Mongoose对MongoDB操作的方法
2021/02/22 Javascript
python psutil库安装教程
2018/03/19 Python
Python之两种模式的生产者消费者模型详解
2018/10/26 Python
简单了解python装饰器原理及使用方法
2019/12/18 Python
解决PyCharm IDE环境下,执行unittest不生成测试报告的问题
2020/09/03 Python
中软Java笔试题
2012/11/11 面试题
本科毕业生专业自荐书范文
2014/02/05 职场文书
音乐教育感言
2014/03/05 职场文书
门卫岗位职责说明书
2014/08/18 职场文书
机关党员四风问题个人整改措施
2014/10/26 职场文书
秋季运动会开幕词
2015/01/28 职场文书
红色故事汇观后感
2015/06/18 职场文书
2015年法律事务部工作总结
2015/07/27 职场文书
golang interface判断为空nil的实现代码
2021/04/24 Golang
使用Golang的channel交叉打印两个数组的操作
2021/04/29 Golang
解析原生JS getComputedStyle
2021/05/25 Javascript