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才可以获取到宽度. ...
随机推荐
- pyqt5的安装
第一步:需要安装:pip3 install pyqt5 安装工具:pip3 install pyqt5-tools 第二步:打开Pycharm,进入设置,添加外部工具 file-->sett ...
- jzoj4313 电话线铺设（最小生成树+最近公共祖先）
题面 \(solution:\) 这道题很奇妙,需要对kruskal重构树有足够的了解!我们先对王牌电缆实行kruskal重构树,然后我们再来枚举每一条李牌电缆,我们将某一条李牌电缆加进这棵树中必然构 ...
- WEB即时通信
问题 传统的浏览器通信方式:基于HTTP协议的请求/响应模式. 早期:通过刷新浏览器来更新服务器端的数据 后来Ajax(XMLHttpRequest是核心):可以不用刷新浏览器更新服务器端数据.但是这 ...
- H - Repeats （重复最多子串的次数）
题目链接:https://cn.vjudge.net/contest/283743#problem/H 题目大意:T组数据,给你一个字符串,然后让你求这个字符串的重复最多子串的次数. 具体思路:论文题 ...
- dubbo系列七、dubbo @Activate 注解使用和实现解析
一.用法 Activate注解表示一个扩展是否被激活(使用),可以放在类定义和方法上,dubbo用它在spi扩展类定义上,表示这个扩展实现激活条件和时机. @Activate(group = Cons ...
- 面向对象特征:封装、多态 以及 @propetry装饰器
(继承补充)组合 obj=fun()#对象 obj.attr=foo()#对象的属性等于另一个对象 什么是组合: A类的对象具备某一个属性,该属性的值是B类的对象 基于这种方式就把A类与B ...
- windows下配置mysql数据库监视工具Mysqlreport
该工具除了可以监控本机Mysql数据库外,也可以监控远程服务器mysql数据库 需要的工具: 1:perl脚本解析工具安装: http://www.activestate.com/activeperl ...
- java.util.Map
map时key/value形式存储信息的,键可以为对象null public static void main(String[] args) { Map<String, String> m ...
- cas中总是得不到返回的属性
cas可以登录,但是得不到返回的属性,后来看日志才知道数据库链接报错,原来URL中少了jdbc:.真是愚蠢的错误,记录之,警之!
- javascript 搞不清原型链和constructor
prototype.constructor仅仅可以用于识别对象是由哪个构造函数初始化的,仅此而已. var one=new Person(‘js’); 要解释这个结果就要仔细研究一下new这个操作符了 ...