js获取宽度
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获取宽度的更多相关文章
- js获取宽度设置thickbox百分比
thickbox的宽高不好设为百分比,这样遇到不同的尺寸的电脑就会出现问题. 怎么做呢? 通过js来处理. <script type="text/javascript"> ...
- 关于 jquery和js获取宽度时只能取整数，取不到小数点
最近在改版自已的一个网站的时候,遇到了一个问题. 用jquery的width()函数获取元素宽度的时候,返回得到的是整数,而不是小数. 如下图,谷歌上显示的宽度为1078.89px 而我用控制台输出了 ...
- JS获取宽度高度大集合
网页可见区域宽:document.body.clientWidth 网页可见区域高:document.body.clientHeight 网页可见区域宽:document.body.offsetWid ...
- [转]js 获取浏览器高度和宽度值(多浏览器)（js获取宽度高度大全）
IE中: document.body.clientWidth ==> BODY对象宽度 document.body.clientHeight ==> BODY对象高度 document.d ...
- 原生js获取宽高与jquery获取宽高的方法的关系
说明:1.因为获取高度的情况跟获取宽度的情况一样,所以以下只说获取宽度的情况. 2.以下所说的所有方法与属性所返回的值都是不带单位的. 3.为了方便说明,以下情况采用缩写表示: obj -> ...
- js获取Html元素的实际宽度高度
第一种情况就是宽高都写在样式表里,就比如#div1{width:120px;}.这中情况通过#div1.style.width拿不到宽度,而通过#div1.offsetWidth才可以获取到宽度. 第 ...
- 原生js获取Html元素的实际宽度高度
第一种情况就是宽高都写在样式表里,就比如#div1{width:120px;}.这中情况通过#div1.style.width拿不到宽度,而通过#div1.offsetWidth才可以获取到宽度. 第 ...
- js获取浏览器高度和宽度值,尽量的考虑了多浏览器。
js获取浏览器高度和宽度值,尽量的考虑了多浏览器. IE中: document.body.clientWidth ==> BODY对象宽度 document.body.clientHeight ...
- [JavaScript] js获取Html元素的实际宽度高度
第一种情况就是宽高都写在样式表里,就比如#div1{width:120px;}.这中情况通 过#div1.style.width拿不到宽度,而通过#div1.offsetWidth才可以获取到宽度. ...
随机推荐
- Java EE之Struts2路径访问小结
一.项目WEB视图结构 注释:struts.xml:最普通配置,任何无特殊配置 二.访问页面 1.访问root.jsp //方式1: http://localhost/demo/root.jsp // ...
- NodeJs进击，新建一个Node Server
直接新建一个server.js 然后 输入以下代码 var http = require('http') http.createServer(function(req,res){ res.writeH ...
- [HAOI2018]奇怪的背包 （DP，数论）
[HAOI2018]奇怪的背包 \(solution:\) 首先,这一道题目的描述很像完全背包,但它所说的背包总重量是在模P意义下的,所以肯定会用到数论.我们先分析一下,每一个物品可以放无数次,可以达 ...
- 【API】开机自启动- ActiveX启动
一 学习目标 这是一段远程控制木马开机启动的代码,主要使用了ActiveX方式启动.结合自己的理解重新整理了笔记.而作为编程新手入门的自己决定要开始梳理学习目的和订下学习的目标.从今天开始要坚持做到 ...
- /etc/profile 路径出错后相关的命令失效解决方式
关于 Linux 的配置文件 /etc/profile 路径出错后相关的命令失效解决方式(如:ls,vi不能用) 今天学习LINUX 下配置jdk 和安装tomcat 通过VI编辑/etc/profi ...
- Ubuntu/Debian apt-get 404 Not Found Package Repository Errors，无法找到包的错误
最简单最常用的方法是,使用如下命令更新到新的版本: sudo apt-get dist-upgrade 但是这个方法有时候不一定能起作用,那么可以使用以下直接替换的命令: sudo sed -i -e ...
- ubuntu 禁用 guest 账户
第一步: run the command(s) below: (编辑如下文件) sudo vi /usr/share/lightdm/lightdm.conf.d/50-ubuntu.c ...
- Ajax jsonp 跨域请求实例
跨域请求 JSONP的缺点则是:它只支持GET请求而不支持POST等其它类型的HTTP请求:它只支持跨域HTTP请求这种情况,不能解决不同域的两个页面之间如何进行JavaScript调用的问题. $. ...
- nginx常见异常分析
1.nginx不转发消息头header问题 proxy_set_header Host $host;proxy_set_header X-Real-IP $remote_addr;proxy_set_ ...
- windows 7安装apache
最近想在PHPEclipse 上开发PHP项目,但遇到的一个问题是:无法在Web 上浏览PHP页面,更谈不上调试了.这一点让人很是纠结,在浏览网上大量的相关内容后,该问题已经解决. 具体的操作过程详见 ...