原文地址：http://www.jb51.net/article/19844.htm

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

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高）

网页可见区域宽： document.body.clientWidth 
网页可见区域高： document.body.clientHeight 
网页可见区域宽： document.body.offsetWidth (包括边线的宽) 
网页可见区域高： document.body.offsetHeight (包括边线的高) 
网页正文全文宽： document.body.scrollWidth 
网页正文全文高： document.body.scrollHeight 
网页被卷去的高： document.body.scrollTop 
网页被卷去的左： document.body.scrollLeft 
网页正文部分上： window.screenTop 
网页正文部分左： window.screenLeft 
屏幕分辨率的高： window.screen.height 
屏幕分辨率的宽： window.screen.width 
屏幕可用工作区高度： window.screen.availHeight 
屏幕可用工作区宽度： window.screen.availWidth

HTML精确定位:scrollLeft,scrollWidth,clientWidth,offsetWidth 
scrollHeight: 获取对象的滚动高度。 
scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离 
scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离 
scrollWidth:获取对象的滚动宽度 
offsetHeight:获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度 
offsetLeft:获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置 
offsetTop:获取对象相对于版面或由 offsetTop 属性指定的父坐标的计算顶端位置 
event.clientX 相对文档的水平座标 
event.clientY 相对文档的垂直座标 
event.offsetX 相对容器的水平坐标 
event.offsetY 相对容器的垂直坐标 
document.documentElement.scrollTop 垂直方向滚动的值 
event.clientX+document.documentElement.scrollTop 相对文档的水平座标+垂直方向滚动的量

==============   =======================

实现代码：

< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>请调整浏览器窗口</title> <meta http-equiv="content-type" content="text/html; charset=gb2312">
</meta></head>
<body>
<h2 align="center">请调整浏览器窗口大小</h2><hr />
<form action="#" method="get" name="form1" id="form1">
<!--显示浏览器窗口的实际尺寸-->
浏览器窗口 的 实际高度: <input type="text" name="availHeight" size="4"/><br />
浏览器窗口 的 实际宽度: <input type="text" name="availWidth" size="4"/><br />
</form>
<script type="text/javascript">
<!--
var winWidth = 0;
var winHeight = 0;
function findDimensions() //函数：获取尺寸
{
//获取窗口宽度
if (window.innerWidth)
winWidth = window.innerWidth;
else if ((document.body) && (document.body.clientWidth))
winWidth = document.body.clientWidth;
//获取窗口高度
if (window.innerHeight)
winHeight = window.innerHeight;
else if ((document.body) && (document.body.clientHeight))
winHeight = document.body.clientHeight;
//通过深入Document内部对body进行检测，获取窗口大小
if (document.documentElement && document.documentElement.clientHeight && document.documentElement.clientWidth)
{
winHeight = document.documentElement.clientHeight;
winWidth = document.documentElement.clientWidth;
}
//结果输出至两个文本框
document.form1.availHeight.value= winHeight;
document.form1.availWidth.value= winWidth;
}
findDimensions();
//调用函数，获取数值
window.οnresize=findDimensions;
//-->
</script>
</body>
</html>

转载于:https://www.cnblogs.com/firstForEver/p/4435629.html

【转】js 获取浏览器高度和宽度值(多浏览器相关推荐

  1. js 获取浏览器高度和宽度值(多浏览器)

     IE中: document.body.clientWidth ==> BODY对象宽度 document.body.clientHeight ==> BODY对象高度 documen ...

  2. 编辑器js获取浏览器高度和宽度值(转)

    js获取浏览器高度和宽度值 网页可见区域宽: document.body.clientWidth 网页可见区域高: document.body.clientHeight 网页可见区域宽: docume ...

  3. java中如何设置浏览器宽度_[Java教程]关于JS中获取浏览器高度和宽度值的多种方法(多浏览器)_星空网...

    关于JS中获取浏览器高度和宽度值的多种方法(多浏览器) 2017-08-07 0 三种浏览器获取值方法 IE中: document.body.clientWidth ==> BODY对象宽度 d ...

  4. js 获取浏览器高度和宽度值

    IE中: document.body.clientWidth ==> BODY对象宽度 document.body.clientHeight ==> BODY对象高度 document.d ...

  5. js 获取浏览器高度和宽度值(兼容多浏览器)

    IE中:  document.body.clientWidth ==> BODY对象宽度  document.body.clientHeight ==> BODY对象高度  documen ...

  6. js获取网页高度和宽度(备份)

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

  7. js获取页面高度和宽度

    var winHeight = window.innerHeightvar winWidth = window.innerWidthconsole.log("页面高度:",winH ...

  8. JS获取各种屏幕的宽度和高度

    JS获取各种屏幕的宽度和高度 描述 用法 网页可见区域宽 document.body.clientWidth 网页可见区域高 document.body.clientHeight 网页可见区域宽 do ...

  9. 在html上js添加宽度,js 获取div高度并重新设置div高度与宽度

    js 获取div高度并重新设置div高度与宽度 js 获取div高度并重新设置div高度与宽度 var $=function(id) { return document.getElementById( ...

  10. JS获取div高度的方法

    有时在写页面时,需要获取一个div的高度.怎么才能获取呢?哈哈,先上结论.有两种方法. offsetHeight .clientHeight getComputedStyle offsetHeight ...

最新文章

  1. xml操作之创建xml节点
  2. 《代码本色》作者Daniel Shiffman：艺术家也编程
  3. android 应用之listview添加radiobutton，获取textView
  4. xmpp整理笔记：xmppFramework框架的导入和介绍
  5. C++之extern和string的find函数和substr函数和data()函数使用总结
  6. [强]VC 6.0 可以这样创建对话框
  7. 开源知识管理系统_Zboot权限后台管理系统开源啦
  8. 我发现Facebook Messenger漏洞可使安卓用户互相监听，获奖6万美元
  9. PAT A1096 质因子分解
  10. vscode settings.json配置
  11. 关于JavaScript实现图片预加载的改进
  12. python机器学习应用mooc_(2)Naive bayes
  13. html与word字体大小转换,word字号大小对照表 Word里面打印字体要多大？？？
  14. 社交网络影响力最大化基础知识总结
  15. ATmega328p EEprom读写
  16. hustoj 配置java_HUSTOJ增加其他语言出现RuntimeError解决办法
  17. LiteIDE主题定制教程【续】
  18. 使用无线网络别掉以轻心 网银密码随时被盗
  19. ios微信公众号返回上一级页面的时候页面数据没有刷新
  20. Maven介绍,IDEA安装和配置maven和maven指令

热门文章

  1. Hive 分组取Top N
  2. stack-based buffer overflow basic paper
  3. noip2009 普及组
  4. ACCESS常用数字类型的说明和取值范围
  5. 企业私有云应用之使用OZ制作openstack镜像
  6. React Native知识7-TabBarIOS组件
  7. 不同品牌机中的“Fn”按钮功能定位汇总
  8. ASP.NET把图片存入数据库和使用文件流读取显示（转）
  9. 09年最值得期待7大IT收购：思科收购VMware
  10. datatable删除行、列