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. Linux - DDOS检测

    netstat  netstat -na #显示所有连接到服务器的活跃的网络连接 netstat -an | grep : | sort # 只显示连接到80段口的活跃的网络连接,80是http端口, ...

  2. 【通信】URLConnection 详细

    通信链接.程序可以通过URLConnection实例向该URL发送请求.读取URL引用的资源. 通常创建一个和 URL的连接,并发送请求.读取此URL引用的资源需要如下几个步骤: 通过调用URL对象o ...

  3. while与for不能互换的地方

  4. http://blog.csdn.net/w_e_i_/article/details/70766035

    http://blog.csdn.net/w_e_i_/article/details/70766035

  5. mysql 案例~mysql元数据的sql统计

    一 简介:今天我们来收集下提取元数据的sql 二 前沿: information_schema  引擎 memory 元数据收集表 三 sql语句: 1#没有使用索引的表统计 SELECT t.TAB ...

  6. 12章 搜索框架ElasticSearch介绍和整合SpringBoot 4节课

    1.搜索引擎知识和搜索框架elasticsearch基本介绍     简介:通过京东电商 介绍什么是搜索引擎,和开源搜索框架ElasticSearch6.x新特性介绍 前言:介绍ES的主要特点和使用场 ...

  7. Ubuntu 下更简单的防火墙 Uncomplicated Firewall

    一看名字就十分的明确“不复杂防火墙”没错,它就是 ufw,在 Ubuntu 操作系统当中已经内置,使用它可以简单快速的操作防火墙的功能,比如开关端口,访问 IP,限制连接等等等等.它与一系列 Linu ...

  8. 自动化监控白皮书——WAS监控

    WebSphere(WAS)是一些大型企业常用的中间件,由于was自身提供的工具有时不能满足多样化的监控需求,而我们又会经常遇到对was进行监控的应用场景,所以我们有必要自己动手做一些was的监控脚本 ...

  9. 在Asp.Net Core中使用中间件保护非公开文件

    在企业开发中,我们经常会遇到由用户上传文件的场景,比如某OA系统中,由用户填写某表单并上传身份证,由身份管理员审查,超级管理员可以查看. 就这样一个场景,用户上传的文件只能有三种人看得见(能够访问) ...

  10. window系统下远程部署Tomcat

    远程访问windows系统,在windows系统上启动tomcat,发布项目.1.拨VPN2.远程桌面连接,cmd --> mstsc 回车,弹出远程桌面连接窗口 3.输入计算机IP:132.2 ...