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才可以获取到宽度. ...
随机推荐
- html5移动端页面分辨率设置及相应字体大小设置的靠谱使用方式
对于html5移动端网页编写CSS网上有很多介绍的文章,但在实际使用过程中还是会纠结. 网上的资料太多,且大多都是技术介绍型,特别是针对android上,网上写的各种麻烦,各种复杂,各种不接地气儿.. ...
- B. Light It Up
题目链接:http://codeforces.com/problemset/problem/1000/B 代码: #include<iostream> #include<cstrin ...
- 图片的Base64编码
Base64编码是一种图片处理格式,通过特定的算法将图片编码成一长串字符串,在页面上显示的时候,可以用该字符串来代替图片的url属性. 我们可以来看一下实际的效果 Base64编码效果 在上图中,我们 ...
- swift中闭包的学习。
在swift中的闭包等同于OC中的block,它的用途就是在于可以包装一段代码在必要的时候进行调用. 闭包定义: {(类型列表) -> 返回值 in // 多条swift语句 // 执行代码 ...
- Android开源动画库nineoldandroids
项目官网地址:http://nineoldandroids.com/ 使用这个库的原因是android3.0之后出了新的animation API,但是android3.0以下的不支持 这个库完成了这 ...
- JavaScript的类型自动转换样例集合处
1.前言 如果Javascript期望使用一个字符串,它会把给定的值转换成字符串:如果Javascript期望使用一个数字,它会把给定的值转化成数字. 2.样例 2.1.字符串拼接时有数字 windo ...
- jsonp原理和实例详解
1.一个众所周知的问题,Ajax直接请求普通文件存在跨域无权限访问的问题,甭管你是静态页面.动态网页.web服务.WCF,只要是跨域请求,一律不准:2.不过我们又发现,Web页面上调用js文件时则不受 ...
- Java中的钩子方法
钩子方法是啥 钩子顾名思义就是用来挂东西的.那么要挂东西必须有个被挂的东西,要不就是铁环.要不就是墙的边沿.所以要能挂住东西必须要有个被勾住的铁环,要一个钩子.那么在java中也是同样的原理,你首先需 ...
- PHP替换指定字符串
在PHP中,有两个函数可以实现字符串替换,strtr()和str_repalce()函数. 首先我们简单了解下strtr()函数的定义及语法. strtr:转换指定字符. 两个语法: 第一种语法: s ...
- 持续集成一：git上传代码
先注册一个账号,注册地址:https://github.com/ 记住地址 下载git本地客户端,下载地址:https://git-scm.com/download/win 一路next傻瓜安装,加入 ...