alert(window.screen.width );//浏览设备的分辨率（电脑、手机、平板等）
alert(window.screen.availWidth );//浏览设备的实际可用宽度（电脑、手机、平板等）
alert(window.innerWidth);//浏览器的可用（内部）宽度（包括滚动条等）[ie不支持]
alert(document.documentElement.clientWidth || document.body.clientWidth);//浏览器实际的可用文档宽度【兼容ie】

document.body.clientWidth:

    谷歌、火狐：body的实际显示宽度+padding

    ie：body的实际显示宽度-border

document.body.offsetWidth:

    谷歌、火狐：body的实际显示宽度+padding+border

    ie：body的实际显示宽度

document.body.scrollWidth:

    谷歌、火狐：body的实际可用宽度+padding

    ie：body的实际可用宽度-border

注：在css设置body为2400px时body的实际宽度为2400+border+padding；而谷歌、火狐为2400px

以下是收集其他作者的总结：

原文链接：http://www.cnblogs.com/lshabest/p/6429219.html

1.对于IE9+、chrome、firefox、Opera、Safari：

window.innerHeight浏览器窗口的内部高度；

window.innerWidth浏览器窗口的内部宽度；

2.对于IE8.7.6.5:

document.documentElement.clientHeight:表示HTML文档所在窗口的当前高度；

document.documentElement.clientWidth:表示HTML文档所在窗口的当前宽度；

或者，因为document对象的body属性对应HTML文档的<body>标签，所以也可表示为：

document.body.clientHeight：表示HTML文档所在窗口的当前高度；

document.body.clientWidth：表示HTML文档所在窗口的当前宽度；

结论：

document.body.clientWidth/Height：的宽高偏小，高甚至默认200；

document.documentElement.clientWidth/Height 和 window.innerWidth/Height 的宽高始终相等。

所以在不同浏览器都实用的的Javascripit方案：

var w = document.documentElement.clientWidth || document.body.clientWidth;
var h = document.documentElement.clientHeight || document.body.clientHeight;

二：网页正文全文宽高

scrollWidth和scrollHeight获取网页内容高度和宽度

1.针对IE.Opera：scrollHeight是网页内容实际高度，可以小于clientHeight;

2.针对NS.firefox：scrollHeight是网页内容高度，不过最小值是clientHeight;也就是说网页内容实际高度小于clientHeight的时候，scrollHeight返回clientHeight；

3.浏览器兼容代码：

var w = document.documentElement.scrollWidth || document.body.scrollWidth;
var h = document.documentElement.scrollHeight || document.body.scrollHeight;

二：网页可见区域宽高，包括滚动条等边线（会随窗口的显示大小改变）

1.值：   offsetWidth = scrollWidth + 左右滚动条 +左右边框；

　　　　offsetHeight = scrollHeight + 上下滚动条 + 上下边框；

2.浏览器兼容代码：

var w = document.documentElement.offsetWidth || document.body.offsetWidth ;
var h = document.documentElement.offsetHeight || document.body.offsetHeight ;

三：网页卷去的距离与偏移量

1.scrollLeft:设置或获取位于给定对象左边界与窗口中目前可见内容的最左端之间的距离；

2.scrollTop:设置或获取位于给定对象最顶端与窗口中目前可见内容的最左端之间的距离；

3.offsetLeft:设置或获取位于给定对象相对于版面或由offsetParent属性指定的父坐标的计算左侧位置；

4.offsetTop:设置或获取位于给定对象相对于版面或由offsetParent属性指定的父坐标的计算顶端位置；

js获取宽度的更多相关文章

  1. js获取宽度设置thickbox百分比

    thickbox的宽高不好设为百分比,这样遇到不同的尺寸的电脑就会出现问题. 怎么做呢? 通过js来处理. <script type="text/javascript"> ...

  2. 关于 jquery和js获取宽度时只能取整数，取不到小数点

    最近在改版自已的一个网站的时候,遇到了一个问题. 用jquery的width()函数获取元素宽度的时候,返回得到的是整数,而不是小数. 如下图,谷歌上显示的宽度为1078.89px 而我用控制台输出了 ...

  3. JS获取宽度高度大集合

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

  4. [转]js 获取浏览器高度和宽度值(多浏览器)（js获取宽度高度大全）

    IE中: document.body.clientWidth ==> BODY对象宽度 document.body.clientHeight ==> BODY对象高度 document.d ...

  5. 原生js获取宽高与jquery获取宽高的方法的关系

    说明:1.因为获取高度的情况跟获取宽度的情况一样,所以以下只说获取宽度的情况.  2.以下所说的所有方法与属性所返回的值都是不带单位的.  3.为了方便说明,以下情况采用缩写表示:  obj -> ...

  6. js获取Html元素的实际宽度高度

    第一种情况就是宽高都写在样式表里,就比如#div1{width:120px;}.这中情况通过#div1.style.width拿不到宽度,而通过#div1.offsetWidth才可以获取到宽度. 第 ...

  7. 原生js获取Html元素的实际宽度高度

    第一种情况就是宽高都写在样式表里,就比如#div1{width:120px;}.这中情况通过#div1.style.width拿不到宽度,而通过#div1.offsetWidth才可以获取到宽度. 第 ...

  8. js获取浏览器高度和宽度值,尽量的考虑了多浏览器。

    js获取浏览器高度和宽度值,尽量的考虑了多浏览器. IE中: document.body.clientWidth ==> BODY对象宽度 document.body.clientHeight ...

  9. [JavaScript] js获取Html元素的实际宽度高度

    第一种情况就是宽高都写在样式表里,就比如#div1{width:120px;}.这中情况通 过#div1.style.width拿不到宽度,而通过#div1.offsetWidth才可以获取到宽度. ...

随机推荐

  1. Failed to load or instantiate TagLibraryValidator class: org.apache.taglibs.standard.tlv.JstlCoreTLV

    今天在使用JSP,引入<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %> ...

  2. Tensorflow datasets.shuffle repeat batch方法

    机器学习中数据读取是很重要的一个环节,TensorFlow也提供了很多实用的方法,为了避免以后时间久了又忘记,所以写下笔记以备日后查看. 最普通的正常情况 首先我们看看最普通的情况: # 创建0-10 ...

  3. Dom4j向XML中指定位置添加、删除、修改节点——（五）

    需求: 在第一本书作者后面增加描述 <描述>好书</描述>  思路:获取书下面下的所有节点(一个list集合),在list集合指定位置添加一个元素(list.add(index ...

  4. JXL导出Excel(只支持xls版本)——（一）

    注意: 导出的后缀是xls可以直接打开,如果导出的后缀是xlsx打开报错,需要手动将名字改为xls才可以打开.也就是JXL不可以导出xlsx的excel. Jar包

  5. Git入门——远程仓库及分支管理

    关于本地版本库的操作,请见:Git入门--本地版本库操作 本篇提到的所有命令: 小结 前面提到,Git相对于传统的SVN有着很大的优势,其中之一就在于集中式系统中,版本库只能存在于中央服务器上:而在G ...

  6. sqlserver中将查询结果拼接成字符串

    #for xml path(param)--将查询结果以xml格式输出 select id,name from table1 for xml path --id和name为table1的真实字段 - ...

  7. 【转】snprintf()函数使用方法

    众所周知,sprintf不能检查目标字符串的长度,可能造成众多安全问题,所以都会推荐使用snprintf. 注:sprintf()函数:int sprintf( char *buffer, const ...

  8. Windows10 中在指定目录下启动Powershell

    (1)首先进入该目录: (2)按住shift键,且同时在该目录空白处鼠标右击,打开右键菜单: (3)此时可以发现,在右键菜单中,多了一项,叫做[在此处打开Powershell窗口(s)],点击该项: ...

  9. concat layer

    参考:http://blog.csdn.net/bailufeiyan/article/details/50876728#reply

  10. ubuntu git hub 建立仓库

    https://www.cnblogs.com/woider/p/6533709.html 1.安装git apt-get install git 2.配置 Git 用户信息 把用户名和邮箱换成你自己 ...