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

简介:
untitled.gif

 

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.onresize=findDimensions; 
//--> 
</script> 
</body> 
</html> 

 

相关文章
|
21天前
|
JavaScript
浏览器插件crx文件--JS混淆与解密
浏览器插件crx文件--JS混淆与解密
21 0
|
21天前
|
JavaScript 前端开发 安全
JavaScript与浏览器的执行平台有何不同?
【4月更文挑战第22天】JavaScript与浏览器的执行平台有何不同?
23 2
|
22天前
|
存储 移动开发 JavaScript
JavaScript和浏览器
【4月更文挑战第22天】JavaScript和浏览器
22 4
|
7天前
|
移动开发 JavaScript 前端开发
javascript监听浏览器离开、进入行为
javascript监听浏览器离开、进入行为
11 0
|
9天前
|
JavaScript 前端开发 开发者
JavaScript基础入门之浏览器控制台调试输出
本文章是对小白学习js的初级教程,也是我对自己学习经验的一种总结,文章大多采用使用案例加讲解,带动学习的方式.因为我们的天性总是喜欢有及时反馈的事物,但是学习是一个慢长的事情,而有结果的回应,才会更好的促进自己去学习,主要是对于javascript学习中的输出,有个大体上的了解,同时通过教学能够更好的使用浏览器来方便我们去学习和运行代码,也是对自己进行笔记整理,对抓住信息关键点的一种提高.
|
25天前
|
JavaScript 前端开发
JavaScript如何获得浏览器的宽高
JavaScript如何获得浏览器的宽高
|
25天前
|
JavaScript 前端开发
JavaScript BOM 浏览器对象模型
JavaScript BOM 浏览器对象模型
|
10月前
|
Web App开发 JavaScript 前端开发
JavaScript Window - 浏览器对象模型
JavaScript Window - 浏览器对象模型
|
11月前
|
JavaScript 前端开发
|
11月前
|
JavaScript 前端开发