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

    传送门 跟这个大佬学的->戳我 假设只有一个宿管,那么从前往后做的过程中,如果能到达某个寝室范围内的人数不够\(b\),那么不如把这个寝室空出来,这样更有利于后面的抉择;反之,就把这个寝室搞正好 ...

  2. Oracle sqlplus失去响应解决方法/如何在数据库失去响应时转储状态信息（转）

    某云平台出现故障,sqlplus连接Oracle数据库,发现没有响应.数据库版本:12.1.0.2.0 查找.借鉴前人经验,成功处理此问题,参考网址:如何在数据库失去响应时转储状态信息 - Oracl ...

  3. MySQL中几个关于时间/时区的变量

    一.log_timestamps 1.1.官方解释 log_timestamps: Log timestamp format. Added in MySQL 5.7.2.This variable c ...

  4. python - str和repr方法:

    # python 内置__str__()和__repr__()方法: #显示自定制 # 示例1 # a = 123 # print(a.__str__()) # 示例2 class Test(): d ...

  5. spring-framework-x.x.x.RELEASE-dist下载教程

    1.打开Spring官网:https://spring.io,点击PROJECTS 2.点击SPRING FRAMEWORK 3.点击GitHub图标 4.找到Access to Binaries,点 ...

  6. 原生JS给元素添加class属性

     有下面这三种简单语句. document.getElementsByTagName('body')[0].className = 'snow-container'; //设置为新的 document ...

  7. ROS Kinetic Install on Debian 9

    Not Succesed! 1.  配置源$ sudo sh -c 'echo "deb http://packages.ros.org/ros/ubuntu $(lsb_release - ...

  8. Linux注销&登陆

    ⒈注销 ①在命令行使用logout,此指令在图形界面无效.

  9. SQLServer语言之DDL,DML,DCL,TCL

    数据库语言分类 SQLServer   SQL主要分成四部分: (1)数据定义.(SQL DDL)用于定义SQL模式.基本表.视图和索引的创建和撤消操作. (2)数据操纵.(SQL DML)数据操纵分 ...

  10. sqlserver2008r2数据库使用触发器对sa及其他数据库账号访问进行IP限制

    一.只允许指定IP访问数据库 创建测试账号 CREATE LOGIN testuser WITH PASSWORD = '123' GO CREATE TRIGGER [tr_connection_l ...