网页可见区域宽：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 相对文档的水平座标+垂直方向滚动的量
IE，FireFox 差异如下：
IE6.0、FF1.06+：
clientWidth = width + padding
clientHeight = height + padding
offsetWidth = width + padding + border
offsetHeight = height + padding + border
IE5.0/5.5：
clientWidth = width - border
clientHeight = height - border
offsetWidth = width
offsetHeight = height
(需要提一下：CSS中的margin属性，与clientWidth、offsetWidth、clientHeight、offsetHeight均无关)
网页可见区域宽： 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
－－－－－－－－－－－－－－－－－－－
技术要点
本节代码主要使用了Document对象关于窗口的一些属性，这些属性的主要功能和用法如下。
要得到窗口的尺寸，对于不同的浏览器，需要使用不同的属性和方法：若要检测窗口的真实尺寸，在Netscape下需要使用Window的属性；在 IE下需要深入Document内部对body进行检测；在DOM环境下，若要得到窗口的尺寸，需要注意根元素的尺寸，而不是元素。
Window对象的innerWidth属性包含当前窗口的内部宽度。Window对象的innerHeight属性包含当前窗口的内部高度。
Document对象的body属性对应HTML文档的标签。Document对象的documentElement属性则表示HTML文档的根节点。
document.body.clientHeight表示HTML文档所在窗口的当前高度。document.body. clientWidth表示HTML文档所在窗口的当前宽度。
实现代码
< !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>
源程序解读
（1）程序首先建立一个表单，包含两个文本框，用于显示窗口当前的宽度和高度，并且，其数值会随窗口大小的改变而变化。
（2）在随后的JavaScript代码中，首先定义了两个变量winWidth和winHeight，用于保存窗口的高度值和宽度值。
（3）然后，在函数findDimensions ( )中，使用window.innerHeight和window.innerWidth得到窗口的高度和宽度，并将二者保存在前述两个变量中。
（4）再通过深入Document内部对body进行检测，获取窗口大小，并存储在前述两个变量中。
（5）在函数的最后，通过按名称访问表单元素，结果输出至两个文本框。
（6）在JavaScript代码的最后，通过调用findDimensions ( )函数，完成整个操作。
分享到：
相关推荐
网页设计排版布局是这一过程的核心，它涉及到如何合理安排网页中的元素，包括文字、图像、菜单、导航条等，以实现内容与形式的完美结合，提升用户体验和网站吸引力。 网页设计不仅仅是技术活，更是一种艺术创作。...
网页布局是网页设计的核心部分，它决定了网页内容的呈现方式和用户体验。"40种网页布局源代码"是一个集合，提供了40个不同的CSS布局方案，对于初学者来说，这是一个非常宝贵的资源，可以帮助他们理解并掌握CSS在网页...
在互联网世界中，Web标准网页布局是构建高效、可访问且具有良好用户体验的网站的关键技术。这一主题涵盖了HTML、CSS和JavaScript等核心Web技术，旨在确保网页在不同设备和浏览器上的一致显示。以下是对"Web标准网页...
同时，图片和文字的排版布局应该相互呼应，图片可以作为补充说明来辅助文字内容的表达。 参考线的使用能够帮助设计师更准确地定位元素的位置，保证设计的精准性。在Photoshop中可以设置辅助线，这些辅助线不仅帮助...
《变幻之美Div+CSS网页布局揭秘(案例实战篇)》是一本专为初学者和有一定基础的网页开发者设计的教程，旨在通过实例教学，深入浅出地解析如何使用Div+CSS进行网页布局。这本书的核心内容涵盖了HTML基础、CSS选择器、...
"别具光芒——CSS属性、浏览器兼容与网页布局"这个主题涵盖了三个核心概念：CSS属性、浏览器兼容性和网页布局。 首先，我们来详细探讨CSS属性。CSS提供了无数的属性，如颜色、字体、大小、位置等，这些属性共同决定...
在网页设计领域，CSS（Cascading Style Sheets）是用于控制网页元素样式和布局的核心技术。本学习笔记将深入探讨CSS在网页布局中的应用，帮助读者掌握如何利用CSS创建美观且响应式的网页。 一、CSS基础 在了解网页...
在网页设计领域，`div+css`是一种广泛采用的布局技术，它将内容与样式分离，使得网页结构清晰，易于维护。本主题聚焦于“div+css网页布局设计模板源代码”，我们将深入探讨这一主题，了解相关知识点。 1. **Div元素...
《Div+CSS 3.0网页布局案例精粹》是一本深入探讨网页设计技术的书籍，专注于使用Div和CSS 3.0进行高效、灵活且响应式的网页布局。Div是HTML中的一个容器元素，用于组织网页内容，而CSS 3.0则是层叠样式表的最新版本...
"十个不错的DIV+CSS网页布局模版"这个资源提供了一系列经典布局，可以帮助开发者快速构建网页，理解并掌握这一技术。 首先，我们要了解什么是DIV。在HTML中，是一个通用的块级元素，用于组合其他HTML元素，为它们...
"结构优化之网页排版布局" 网页排版布局是指在网页设计中对视觉元素的安排和组织，以便实现信息内容的传达和展示。网页的设计必须遵循平面设计形式美的法则，使网页获得最大的视觉传达功能。以下是网页排版布局的...
本资源“CSS标准网页布局开发指南（光盘）源码”是一份专门针对CSS布局技术的学习资料，旨在帮助开发者掌握创建高效、标准化的网页布局技巧。 首先，我们要理解CSS布局的基础概念。在网页布局中，我们通常会遇到...
div+css网页布局学习 div+css网页布局学习是指使用div标签和css样式来设计和布局网页的技术。下面是学习div+css网页布局的相关知识点： 一、XHTML基础知识 * XHTML是HTML的后继版本，提供了一些新的功能和改进 * ...
《CSS+DIV网页布局实例40例》是一个深入学习网页布局技术的重要资源，它涵盖了CSS（层叠样式表）和DIV元素在构建现代网页时的多种应用场景和技巧。本资源包含40个独立的实例，旨在帮助用户从实践中掌握网页布局的...
网页布局参考 经典布局标准 网页布局 标准 html css 像素
在网页设计领域，Div CSS布局模版是一种常用的技术，用于构建高效、响应式的网页结构。Div，全称为“Division”，是HTML中的一个区块元素，它允许我们将网页内容划分为多个独立的部分，便于管理和样式化。CSS，即...
在IT行业中，网页布局是构建网站视觉效果和用户体验的核心部分。"别具光芒－网页布局案例剖析源代码"是一个专门探讨网页布局设计的资源，它提供了深入理解和实践CSS布局技术的机会。这个压缩包包含了名为"1css网页...
在网页设计领域，`DIV+CSS`是一种广泛采用的布局技术，它将内容与样式分离，使得网页结构清晰，易于维护和更新。本教程将深入探讨`DIV+CSS`网页布局的基础知识，帮助你理解这一核心技能。 首先，我们要了解什么是`...
《DIV+CSS网页布局商业案例精粹》是一本专注于网页设计和开发的专业书籍，其配书源代码提供了丰富的实例，让读者能够深入理解和实践DIV+CSS技术。在网页设计领域，DIV（Division）和CSS（Cascading Style Sheets）是...
《DIV+CSS网页布局商业案例精粹光盘源文件》是一个集合了众多基于DIV和CSS技术的网页设计实例，旨在帮助读者深入理解并掌握这两种关键技术在实际商业项目中的应用。这个压缩包包含了丰富的源文件，提供了实践学习和...