转载请注明来源：https://www.cnblogs.com/hookjc/

<script>
function getInfo()
{
var s = "";
s += " 网页可见区域宽："+ document.body.clientWidth;
s += " 网页可见区域高："+ document.body.clientHeight;
s += " 网页可见区域宽："+ document.body.offsetWidth + " (包括边线和滚动条的宽)";
s += " 网页可见区域高："+ document.body.offsetHeight + " (包括边线的宽)";
s += " 网页正文全文宽："+ document.body.scrollWidth;
s += " 网页正文全文高："+ document.body.scrollHeight;
s += " 网页被卷去的高(ff)："+ document.body.scrollTop;
s += " 网页被卷去的高(ie)："+ document.documentElement.scrollTop;
s += " 网页被卷去的左："+ document.body.scrollLeft;
s += " 网页正文部分上："+ window.screenTop;
s += " 网页正文部分左："+ window.screenLeft;
s += " 屏幕分辨率的高："+ window.screen.height;
s += " 屏幕分辨率的宽："+ window.screen.width;
s += " 屏幕可用工作区高度："+ window.screen.availHeight;
s += " 屏幕可用工作区宽度："+ window.screen.availWidth;
s += " 你的屏幕设置是 "+ window.screen.colorDepth +" 位彩色";
s += " 你的屏幕设置 "+ window.screen.deviceXDPI +" 像素/英寸";
//alert (s);
}
getInfo();
</script>
在我本地测试当中：
在IE、FireFox、Opera下都可以使用
document.body.clientWidth
document.body.clientHeight
即可获得，很简单，很方便。
而在公司项目当中：
Opera仍然使用
document.body.clientWidth
document.body.clientHeight
可是IE和FireFox则使用
document.documentElement.clientWidth
document.documentElement.clientHeight
原来是W3C的标准在作怪啊
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
如果在页面中添加这行标记的话

在IE中：
document.body.clientWidth ==> BODY对象宽度
document.body.clientHeight ==> BODY对象高度
document.documentElement.clientWidth ==> 可见区域宽度
document.documentElement.clientHeight ==> 可见区域高度
在FireFox中：
document.body.clientWidth ==> BODY对象宽度
document.body.clientHeight ==> BODY对象高度
document.documentElement.clientWidth ==> 可见区域宽度
document.documentElement.clientHeight ==> 可见区域高度
?
在Opera中：
document.body.clientWidth ==> 可见区域宽度
document.body.clientHeight ==> 可见区域高度
document.documentElement.clientWidth ==> 页面对象宽度（即BODY对象宽度加上Margin宽）
document.documentElement.clientHeight ==> 页面对象高度（即BODY对象高度加上Margin高）
而如果没有定义W3C的标准，则
IE为：
document.documentElement.clientWidth ==> 0
document.documentElement.clientHeight ==> 0
FireFox为：
document.documentElement.clientWidth ==> 页面对象宽度（即BODY对象宽度加上Margin宽）document.documentElement.clientHeight ==> 页面对象高度（即BODY对象高度加上Margin高）
Opera为：
document.documentElement.clientWidth ==> 页面对象宽度（即BODY对象宽度加上Margin宽）document.documentElement.clientHeight ==> 页面对象高度（即BODY对象高度加上Margin高）

来源：python脚本自动迁移

js获取高度的更多相关文章

  1. js获取高度和宽度

      CreateTime--2017年7月24日10:15:47Author:Marydon js获取高度和宽度 参考连接:http://www.cnblogs.com/EasonJim/p/6229 ...

  2. js 获取高度

    网页可见区域宽 :document.body.clientWidth; 网页可见区域高:document.body.clientHeight;   网页可见区域高:document.body.offs ...

  3. js获取浏览器高度

    常用: JS 获取浏览器窗口大小 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 // 获取窗口宽度 if (window.innerWidth) winWidth = ...

  4. js获取Html元素的实际宽度高度

    第一种情况就是宽高都写在样式表里,就比如#div1{width:120px;}.这中情况通过#div1.style.width拿不到宽度,而通过#div1.offsetWidth才可以获取到宽度. 第 ...

  5. JS获取浏览器高度 并赋值给类

    在给网站做轮播焦点图的时候,如果需要全屏的话,可以用下面的jQuery来获取浏览器高度,然后赋值给类. $(window).load(function () { var maxHeight = 0; ...

  6. 原生js获取Html元素的实际宽度高度

    第一种情况就是宽高都写在样式表里,就比如#div1{width:120px;}.这中情况通过#div1.style.width拿不到宽度,而通过#div1.offsetWidth才可以获取到宽度. 第 ...

  7. js获取浏览器当前窗口的高度长度

    js获取浏览器可见区域(不包括标题栏.地址栏.收藏夹栏状态栏等额外区域,仅为页面呈现区域)的高度和宽度宽度:document.documentElement.clientWidth高度:documen ...

  8. js获取滚动条距离浏览器顶部,底部的高度,兼容ie和firefox

    做web开发经常会碰到需要获取浏览器的滚动条与顶部和底部的距离,然后做相应的处理动作.下面作者就如何通过js来获取浏览器滚动条距离浏览器顶部和底部的高度做一下分享,这个是同时兼容ie和firefox的 ...

  9. js获取浏览器高度和宽度值,尽量的考虑了多浏览器。

    js获取浏览器高度和宽度值,尽量的考虑了多浏览器. IE中: document.body.clientWidth ==> BODY对象宽度 document.body.clientHeight ...

随机推荐

  1. Linux开关机与登录注销

    开机和重启 shutdown -h now:立即关机计算机 shutdown -h 1:1分钟后关机 halt:立即关机 reboot:立即重启 sync:把内存的数据同步到磁盘 注: shutdow ...

  2. 分布式链路追踪自从用了SkyWalking，睡得真香！

    本篇文章介绍链路追踪的另外一种解决方案Skywalking,文章目录如下: 什么是Skywalking? 上一篇文章介绍了分布式链路追踪的一种方式:Spring Cloud Sleuth+ZipKin ...

  3. OAuth2.0的定义

    1. 什么是OAuth2.0 * 用于REST/APIs的代理授权框架(delegated authorization) * 基于令牌Token的授权,在无需暴露用户密码的情况下,使应用能获取对用户数 ...

  4. vue-router 两个子路由之间相互跳转时出错

    patient页面跳转到apply页面后,再点击patient页面后无法跳回 解决方法:使用`${path + path1}` 来自为知笔记(Wiz)

  5. Shell 中的 expect 命令

    目录 expect 介绍 expect 安装 expect 语法 自动拷贝文件到远程主机 示例一 示例二 示例三 示例四 expect 介绍 借助 expect 处理交互的命令,可以将交互过程如 ss ...

  6. 关于 vim 的插件 snipmate 以及它的安装方式（使用国内源）

    snipmate 是一个类似代码补全的东西,更好的地方在于自定义补全的内容. 最新的 snipmate 是在 https://github.com/garbas/vim-snipmate 而不是在官网 ...

  7. linux笔记（一）

    linux 开源镜像网址:http://mirrors.163.com pwd : 展示当前所在的目录的绝对路径 cd : 切换到某个路径  cd 命令,是 Change Directory 的缩写, ...

  8. FastDFSJava客户端使用

    1.1.java客户端 余庆先生提供了一个Java客户端,但是作为一个C程序员,写的java代码可想而知.而且已经很久不维护了. 这里推荐一个开源的FastDFS客户端,支持最新的SpringBoot ...

  9. 5.12-jsp分页功能学习

    1.分页功能相关资料查询 分页须知知识点: (1)JDBC2.0的可滚动结果集. (2)HTTP GET请求. 一.可滚动结果集   Connection con  = DriverManager.g ...

  10. 宣布与Epic Games合作，为虚幻引擎创造Cesium

    Cesium中文网:http://cesiumcn.org/ | 国内快速访问:http://cesium.coinidea.com/ 没有什么能比支持史诗游戏和史诗巨无霸计划(Epic MegaGr ...