有时我们需要获得浏览器窗口或屏幕的大小、窗口下拉框下拉的距离等数据，对应这些需求，js中提供了不少解决方法，只是数量稍多容易混淆它们各自的意义，下面咱们用图例来解释下12个常见对象属性的作用。

其中有6个常用的浏览器窗体属性（由于offsetWidth/Height在不同浏览器下表现有出入，故不在本章讨论）：

document.documentElement.clientWidth

document.documentElement.clientHeight

document.documentElement.scrollWidth

document.documentElement.scrollHeight

document.body.scrollTop

document.body.scrollLeft

和6个常用的屏幕对象属性：

window.screen.width

window.screen.height

window.screenTop

window.screenLeft

window.screen.availHeight

window.screen.availWidth

先贴下代码，方便各位先调试看下结果，要注意的地方是务必确保js代码在页面加载后才执行（放到最后面就得了），不然会出现body未加载完成则执行js代码，导致某些属性返回值为undefined：

 <html>

 <head>

 <meta charset="utf-8">

 <title>无标题文档</title>

 <style>

 body{

     margin:0;

 }

 </style>

 </head>

 <body>

 <div id="dd" style="width:2000px; height:1800px; margin:0;">

 啧啧，随便写点内容呗<br/><br/><br/>啧啧，随便写点内容呗啧啧，随便写点内容呗啧啧，随便写点内容呗<br/><br/><br/>啧啧，随便写点内容呗<br/><br/><br/>

 啧啧，随便写点内容呗<br/><br/><br/>啧啧，随便写点内容呗啧啧，随便写点内容呗啧啧，随便写点内容呗<br/><br/><br/>啧啧，随便写点内容呗<br/><br/><br/>

 啧啧，随便写点内容呗<br/><br/><br/>啧啧，随便写点内容呗<br/><br/><br/>啧啧，随便写点内容呗啧啧，随便写点内容呗啧啧，随便写点内容呗

 </div>

 </body>

 <script>

 console.log(document.documentElement.clientWidth+" "+document.documentElement.clientHeight+" "+document.documentElement.scrollWidth+" "

 +document.documentElement.scrollHeight+" "+document.body.scrollTop+" "+document.body.scrollLeft

 +" "+window.screen.width+" "+window.screen.height+" "+window.screenTop+" "+window.screenLeft

 +" "+window.screen.availHeight+" "+window.screen.availWidth

 );

 </script>

 </html>

⑴ document.documentElement.clientWidth 和 document.documentElement.clientHeight 是获取浏览器当前窗口视图区域（也就是说不包括工具栏、滚动条等）的实际宽高（旧的HTML标准是写作document.body.clientWidth/clientHeight，已过时，建议大家用新标准来描述）：

由于IE8-会把这个属性当作整个文档的宽度或高度，而JQ的$(window).height()在部分浏览器下也会出错，建议如果要获取浏览器可视区域高度，可以这样写：

var win_h = window.innerHeight||document.documentElement.clientHeight;

⑵ document.documentElement.scrollWidth 和 document.documentElement.scrollHeight 是整个网页大大小，包括可视区域和被卷起来的区域，网页整体就是了（在这例子里我们是设置div宽高分别为2000px和1800px的）：

⑶ document.body.scrollTop 和 document.body.scrollLeft 是整个网页的上方或者左边被卷起来的部分（注意这里中间部分是body而不再是documentElement）：

有人问，那我要获取网页被卷起来的下部分或者右部分怎么办？

答案很简单，比如你要得到网页被卷起来的下部分，就用整个网页的高document.documentElement.scrollHeight减去网页上方被卷起来的部分document.body.scrollTop，再减去当前浏览器视图区域高度document.documentElement.clientHeight即可

⑷ window.screen.width 和 window.screen.height 是获取你整个显示器屏幕大小的（我的显示器分辨率为1680*1050）：

⑸ window.screenTop 和 window.screenLeft 是浏览器窗口顶部/左端距离屏幕大小的：

⑹ window.screen.availHeight 和 window.screen.availWidth 是用户屏幕实际工作区（减去任务栏等非工作区模块大小）的高和宽：

OK这12个属性都介绍完了，其实用的最多的还是前6个跟浏览器和网页密切关联的属性，后面几个屏幕相关的属性用的比较少吧（比如设置弹出广告窗口和屏幕顶端的距离什么的），感觉记好前六个就行啦。

收工~周末快乐~！

图解js中常用的判断浏览器窗体、用户屏幕可视区域大小位置的方法的更多相关文章

  1. Js中获取显示器、浏览器以及窗口等的宽度与高度的方法

    网页可见区域宽:document.body.clientWidth 网页可见区域高:document.body.clientHeight 网页可见区域宽:document.body.offsetWid ...

  2. JS代码片段：判断一个元素是否进入可视区域

    // Determine if an element is in the visible viewport function isInViewport(element) { var rect = el ...

  3. 基础篇：1.JavaScript运行在html中，引用有几种方式？—— 6.js中常用的输出方式？

    书接上文,上文提到若干条JavaScript的基础性知识,大部分都是一些概念性的东西,本着认真严谨的态度,我们要认真对待,有些条目的问题是某个知识点的周边延伸,为节约篇幅,就一起整理了,如有描述不对的 ...

  4. Js中常用的字符串，数组，函数扩展

    由于最近辞职在家,自己的时间相对多一点.所以就根据prototytpeJS的API,结合自己正在看的司徒大神的<javascript框架设计>,整理了下Js中常用一些字符串,数组,函数扩展 ...

  5. js中常用的操作

    1.js中常用的数组操作 2.js中常用的字符串操作 3.js中常用的时间日期操作 4.定时器

  6. JS中，如何判断一个被转换的数是否是NaN

    var x="abc"; //isNaN()函数判断是否是NaN if (isNaN(parseInt(x))) { alert("非数字"); } else{ ...

  7. 【温故知新】——原生js中常用的四种循环方式

    一.引言 本文主要是利用一个例子,讲一下原生js中常用的四种循环方式的使用与区别: 实现效果: 在网页中弹出框输入0   网页输出“欢迎下次光临” 在网页中弹出框输入1   网页输出“查询中……” 在 ...

  8. JS中常用开发知识点

     JS中常用开发知识点 1.获取指定范围内的随机数 2.随机获取数组中的元素 3.生成从0到指定值的数字数组 等同于: 4.打乱数字数组的顺序 5.对象转换为数组 //注意对象必须是以下格式的才可以通 ...

  9. js中常用的对象—String的属性和方法

    今天说一下,js中常用的内置对象——String对象它有以下几个常用的属性:lengthprototype 有以下几个常用的方法:parseInt()转换为数字parseFloat()转换为数字,支持 ...

随机推荐

  1. 文件上传——servlet实现

    自己对照别的博主的博客实现的,记录用. 整个上传的结构如下: 上传的页面:unload.jsp <%@ page language="java" import="j ...

  2. Nginx密码验证 ngx_http_auth_basic_module模块

    有时候我们需要限制某些目录只允许指定的用户才可以访问,我们可以给指定的目录添加一个用户限制. nginx给我们提供了ngx_http_auth_basic_module模块来实现这个功能. 模块ngx ...

  3. ESXi 强制4G内存解决（VMware ESXi 6.0.0.update02 ）

    手上有个性能不太好的机器,想着装一个系统有点浪费,但是4G内存实际识别只有3.7G,到达不了EXSi的最低4G限制,无法安装.最终找到一个解决方法,经过验证适用于ESXi 6.0. 源自于:ESXi ...

  4. TCP/IP协议和HTTP协议 浩哥指教

    TCP和IP在HTTP协议的上层,HTTP算是应用层,IP协议建立的是电脑跟电脑之间的联系,具体过程是,物理上,通过网线,解析MAC地址,到达路由,路由告诉数据将要去哪里,对方电脑通过NDS解析,解析 ...

  5. Excel中添加并使用宏实现批量更新数据

    一.状况描述    当我们需要后台更新大量数据的时候,可以使用该功能.二.解決方案    (1)新建一个Excel文件,并另存为启用宏的Excel工作簿,扩展名为.xlsm.    (2)在Excel ...

  6. 【转】Nginx服务器详细配置含注释

    #使用的用户和组 user www www; #指定工作衍生进程数(一般等于CPU的总核数或总核数的两倍) worker_processes 8; #指定错误日志存放的路径,错误日志的记录级别可为de ...

  7. C# 模拟上传图片

    上传图片的格式一定要按规定的写,不然没办法正确上传的. 我在上传的时候就是值前面没有空一行,导致上传不成功,很纠结的错误. 我要模拟的是一个FLASH的上传控件,我开始用HttpAnalyze抓包是抓 ...

  8. Hadoop streaming模式获取jobconf参数

    1. 像map_input_file这种环境变量是在hadoop-streaming.jar程序中设置的,所以无需-cmdenv map_input_file参数就可以在php中直接引用,如$var= ...

  9. OD使用教程8

    方式一基本的打补丁方式:   打开程序之后首先会跳出一个nag窗口,从中我们知道了可以将nag窗口作为切入点,只要找到了nag的触发点就等同于找到注册与未注册的判断的点 右键-查找-所有参考文本字串 ...

  10. [PL/SQL] 如何规避异常ORA-01403

    如果mytable表中不存在 ID = 123 的数据,那么 SELECT Flag INTO flag FROM mytable WHERE ID = 123 将抛出异常ORA-01403 SELE ...