JS 获取浏览器窗口大小

<script>

    // 获取窗口宽度

    if (windows.innerWidth) {

        winWidth = windows.innerWidth;

    } else if ((document.body) && (document.body.clientWidth)) {

        winWidth = document.body.clientWidth;

    }

    // 获取窗口高度

    if (windows.innerHeight) {

        winHeight = windows.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;

    }

    </script>

window对象：

　　（1）innerHeight属性：窗口中文档显示区域的高度，不包括菜单栏、工具栏等部分。该属性可读可写。

　　 IE不支持该属性，IE中body元素的clientHeight属性与该属性相同。

　　（2)innerWidth属性：窗口中文档显示区域的宽度，同样不包括边框。该属性可读可写。

　　  IE不支持该属性，IE中body元素的clientWidth属性与该属性相同。

　　  clientHeight与clientWidth属性是只读的。

　　 另外，IE不支持outerWidth、outerHeight属性。

　　 (3)pageXOffset属性：整数只读属性，表示文档向右滚动过的像素数。

　　   IE不支持该属性，使用body元素的scrollLeft属性替代。

　　 (4)pageYOffset属性：整数只读属性，表示文档向下滚动过的像素数。

　　  IE不支持该属性，使用body元素的scrollTop属性替代。

documentElement 和 body 相关说明：

　　body是DOM对象里的body子节点，即 <body> 标签；
　　documentElement 是整个节点树的根节点root，即<html> 标签；
 
 

兼容IE与DOM浏览器，如何获取窗口中文档显示区域的宽度及高度，还可以使用?:条件语句，如下：

　　windows.innerWidth ? windows.innerWidth : document.body.clientWidth;

　　windows.innerHeight ? windows.innerHeight : document.body.clientHeight;

 

document.body.clientWidth 和 document.documentElement.clientWidth 在不同浏览器的差异：

　　如果定义了W3C的标准

　　在IE中：
　　　　document.body.clientWidth ==> BODY对象宽度
　　　　document.body.clientHeight ==> BODY对象高度
　　　　document.documentElement.clientWidth ==>
可见区域宽度
　　　　document.documentElement.clientHeight ==>
可见区域高度
　　在FireFox中：
　　　　document.body.clientWidth ==> BODY对象宽度
　　　　document.body.clientHeight ==> BODY对象高度
　　　　document.documentElement.clientWidth ==>
可见区域宽度
　　　　document.documentElement.clientHeight ==>
可见区域高度
　　在Opera中：
　　　　document.body.clientWidth ==> 可见区域宽度
　　　　document.body.clientHeight ==> 可见区域高度
　　　　document.documentElement.clientWidth ==>
页面对象宽度（即BODY对象宽度加上Margin宽）
　　　　document.documentElement.clientHeight ==>
页面对象高度（即BODY对象高度加上Margin高）

　　而如果没有定义W3C的标准，则

　　IE为：
　　　　document.documentElement.clientWidth ==> 0
　　　　document.documentElement.clientHeight ==> 0
　　FireFox为：
　　　　document.documentElement.clientWidth ==>
页面对象宽度（即BODY对象宽度加上Margin宽）document.documentElement.clientHeight
==> 页面对象高度（即BODY对象高度加上Margin高）
　　Opera为：
　　　　document.documentElement.clientWidth ==>
页面对象宽度（即BODY对象宽度加上Margin宽）document.documentElement.clientHeight
==> 页面对象高度（即BODY对象高度加上Margin高）

网页可见区域宽： 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;

IE：

　　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均无关)

假设 obj 为某个 HTML 控件：

　　obj.offsetTop 指 obj 相对于版面或由 offsetParent
属性指定的父坐标的计算上侧位置，整型，单位像素。

　　obj.offsetLeft 指 obj 相对于版面或由 offsetParent
属性指定的父坐标的计算左侧位置，整型，单位像素。

　　obj.offsetWidth 指 obj 控件自身的绝对宽度，不包括因 overflow
而未显示的部分，也就是其实际占据的宽度，整型，单位像素。

　　obj.offsetHeight 指 obj 控件自身的绝对高度，不包括因 overflow
而未显示的部分，也就是其实际占据的高度，整型，单位像素。

　　我们对前面提到的 offsetParent 作个说明。

　　offsetParent 获取定义对象 offsetTop 和 offsetLeft 属性的容器对象的引用。offsetTop
与 offsetParent
很复杂，不同浏览器有不同解释，浮动一下解释又不同了，所以我们一般只要理解通过二者可以获得控件在浏览器中的绝对位置即可。

　　以上属性在 FireFox 中也有效。

　　另外：我们这里所说的是指 HTML 控件的属性值，并不是 document.body，document.body
的值在不同浏览器中有不同解释（实际上大多数环境是由于对 document.body 解释不同造成的，并不是由于对 offset
解释不同造成的）

我们知道 offsetTop 可以获得 HTML 元素距离上方或外层元素的位置，style.top
也是可以的，二者的区别是：

　　一、offsetTop 返回的是数字，而 style.top 返回的是字符串，除了数字外还带有单位：px。

　　二、offsetTop 只读，而 style.top 可读写。

　　三、如果没有给 HTML 元素指定过 top 样式，则 style.top 返回的是空字符串。

　　offsetLeft 与 style.left、offsetWidth 与 style.width、offsetHeight 与
style.height 也是同样道理。

clientHeight
　　大家对 clientHeight
都没有什么异议，都认为是内容可视区域的高度，也就是说页面浏览器中可以看到内容的这个区域的高度，一般是最后一个工具条以下到状态栏以上的这个区域，与页面内容无关。

offsetHeight
　　IE、Opera 认为 offsetHeight =
clientHeight + 滚动条 + 边框。
　　NS、FF 认为 offsetHeight 是网页内容实际高度，可以小于 clientHeight。

scrollHeight
　　IE、Opera 认为 scrollHeight 是网页内容实际高度，可以小于 clientHeight。
　　NS、FF 认为 scrollHeight 是网页内容高度，不过最小值是 clientHeight。

简单地说，clientHeight 就是透过浏览器看内容的这个区域高度。
　　NS、FF 认为 offsetHeight 和 scrollHeight 都是网页内容高度，只不过当网页内容高度小于等于
clientHeight 时，scrollHeight 的值是 clientHeight，而 offsetHeight 可以小于
clientHeight。
　　IE、Opera 认为 offsetHeight 是可视区域 clientHeight
滚动条加边框。scrollHeight 则是网页内容实际高度。

　　同理：clientWidth、offsetWidth 和 scrollWidth 的解释与上面相同，只是把高度换成宽度即可。

　　说明：以上基于 DTD HTML 4.01 Transitional，如果是 DTD
XHTML 1.0 Transitional 则意义又会不同，在 XHTML
中这三个值都是同一个值，都表示内容的实际高度。新版本的浏览器大多支持根据页面指定的 DOCTYPE
来启用不同的解释器

IE 和 FireFox 全面支持，而 Netscape 8 和 Opera
7.6 不支持
scrollTop、scrollLeft（document.body.scrollTop、document.body.scrollLeft
除外）。

1.clientHeight, clientWidth:
这两个属性大体上显示了元素内容的象素高度和宽度.理论上说这些测量不考虑任何通过样式表加入
元素中的页边距,边框等.

2.clientLeft,clientTop:
这两个返回的是元素周围边框的厚度,如果不指定一个边框或者不定位改元素,他的值就是0.

3.scrollLeft,scrollTop:
如果元素是可以滚动的,可以通过这俩个属性得到元素在水平和垂直方向上滚动了多远,单位是象素.
对于不可以滚动的元素,这些值总是0.

4.scrollHeight,scrollWidth:
不管有多少对象在页面上可见,他们得到的是整体.

5.style.left:
定位元素与包含它的矩形左边界的偏移量

6.style.pixelLeft:
返回定位元素左边界偏移量的整数像素值.因为属性的非像素值返回的是包含单位的字符串,例如,30px.
利用这个属性可以单独处理以像素为单位的数值.

7.style:posLetf:
返回定位元素左边界偏移量的数量值,不管相应的样式表元素指定什么单位.因为属性的非位置值返回的是包含单位的字符串,例如,1.2em

LEFT:  
为从左向右移的位置,即挂件距离屏幕左边缘的距离;
clientLeft  
返回对象的offsetLeft属性值和到当前窗口左边的真实值之间的距离
offsetLeft  
返回对象相对于父级对象的布局或坐标的left值，就是以父级对象左上角为坐标原点，向右和向下为X、Y轴正方向的x坐标
pixelLeft  
设置或返回对象相对于窗口左边的位置
scrollWidth 是对象的实际内容的宽，不包边线宽度，会随对象中内容的多少改变（内容多了可能会改变对象的实际宽度）。
clientWidth 是对象可见的宽度，不包滚动条等边线，会随窗口的显示大小改变。
offsetWidth 是对象的可见宽度，包滚动条等边线，会随窗口的显示大小改变

JS 获取浏览器窗口大小的更多相关文章

  1. JS 获取浏览器窗口大小clientWidth、offsetWidth、scrollWidth

    常用: JS 获取浏览器窗口大小   // 获取窗口宽度 if (windows.innerWidth) winWidth = windows.innerWidth; else if ((docume ...

  2. js获取浏览器窗口大小

    摘抄:https://blog.csdn.net/qq_27628085/article/details/81947478 常用: JS 获取浏览器窗口大小       // 获取窗口宽度   if ...

  3. JS获取浏览器窗口大小 获取屏幕，浏览器，网页高度宽度

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

  4. 函数语法：JS获取浏览器窗口大小 获取屏幕，浏览器，网页高度宽度（转载）

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

  5. JS 获取浏览器窗口大小 获取屏幕，浏览器，网页高度宽度

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

  6. 常用: JS 获取浏览器窗口大小

    // 获取窗口宽度 if (windows.innerWidth) winWidth = windows.innerWidth; else if ((document.body) && ...

  7. JS获取浏览器窗口大小 获取屏幕,浏览器,网页高度宽度

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

  8. js获取浏览器高度

    常用: JS 获取浏览器窗口大小 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 // 获取窗口宽度 if (window.innerWidth) winWidth = ...

  9. JS 获取浏览器和屏幕宽高等信息代码

    JS 获取浏览器和屏幕宽高等信息. 网页可见区域宽:document.body.clientWidth  网页可见区域高:document.body.clientHeight  网页可见区域宽:doc ...

随机推荐

  1. python __name__

    当你打开一个.py文件时,经常会在代码的最下面看到if __name__ == '__main__':,现在就来介 绍一下它的作用. 模块是对象,并且所有的模块都有一个内置属性 __name__.一个 ...

  2. Unity 用户手册用户指南二维纹理 (Texture 2D)

    http://www.58player.com/blog-2327-953.html 二维纹理 (Texture 2D) 纹理 (Textures) 使您的 网格 (Meshes).粒子 (Parti ...

  3. leetcode 153. Find Minimum in Rotated Sorted Array

    Suppose a sorted array is rotated at some pivot unknown to you beforehand. (i.e., 0 1 2 4 5 6 7 migh ...

  4. C++输入输出流

    一.C++输入输出流的含义 以前所用到的输入和输出,都是以终端为对象的,即从键盘输入数据,运行结果输出到显示器屏幕上.从操作系统的角度看,每一个与主机相连的输入输出设备都被看作一个文件.程序的输入指的 ...

  5. OS X 添加环境变量

    这个方法相对靠谱,可用: 1, cd 到home 2, touch .bash_profile 3,open -e .bash_profile 把各个路径按如下填写: export PATH=${PA ...

  6. gollum安装教程

    在线markdown编辑器,可以直接将该程序安装在服务器上,直接编辑完之后保存在gollum目录下 1.在线安装     sudo apt-get install ruby1.9.1 ruby1.9. ...

  7. centos 谷歌浏览器安装

    首先,这个是坑 http://www.tecmint.com/install-google-chrome-on-redhat-centos-fedora-linux/ 安装会报错,按照错误找到以下资源 ...

  8. Objective C 快速入门学习四

    类 1.合成存取器方法 @property   成员变量 @synthesize 成员变量 可以让编译器自动合成 设置和获取函数的方法,不用手动生成set成员变量,Get成员变量 @interface ...

  9. 页面遮罩层，并且阻止页面body滚动。bootstrap模态框原理

    实现思路: 1.需要有一个层将body遮住,放在body上方. 2.修改body的overflow属性值为:hidden 废话不多说了,将关键代码贴出来了,兼容火狐,谷歌,ie 遮罩层的样式代码,红色 ...

  10. jquery数组内多维对象

    jquery数组内多维对象 var postData=[],obj,list; obj = !!obj ? obj : $('#dist_meici_checkinfo_form'); obj.fin ...