在没有DOCTYPE声明的情况下:
document.body.clientWidth
document.body.clientHeight
为当前窗口的宽度/高度;
在DOCTYPE声明以后
document.body.clientWidth
document.body.clientHeight
为整个页面的宽度/高度;
document.documentElement.clientWidth
document.documentElement.clientHeight
为当前窗口的宽度/高度;
同样增加DOCTYPE声明后
document.body.scrollLeft
document.body.scrollTop
要改为
document.documentElement.scrollLeft
document.documentElement.scrollTop
注意保存时，文件的编码要看好，有时会出现脚本错误，是因为编码的格式问题，如GB2312
------------------------------------------------------------------
在
设计页面时可能经常会用到固定层的位置，这就需要获取一些html对象的坐标以更灵活的设置目标层的坐标，这里可能就会用到
document.body.scrollTop等属性，但是此属性在xhtml标准网页或者更简单的说是带<!DOCTYPE
..>标签的页面里得到的结果是0，如果不要此标签则一切正常，那么在xhtml页面怎么获得body的坐标呢，当然有办法-使用
document.documentElement来取代document.body,可以这样写
例：
var top = document.documentElement.scrollTop || document.body.scrollTop;
在javascript里||是个好东西，除了能用在if等条件判断里，还能用在变量赋值上。那么上例等同于下例。
例：
var top = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop;
这么写可以得到很好的兼容性。
---------------------------------------------------
JS获取浏览器窗口巨细 获取屏幕，浏览器，网页高度宽度
网页可见区域宽：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文档所在窗口确当前宽度。
实现源代码
<!------------------------------
文件 名：30.3.htm------------------------------>
<!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">
</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 ( )函数，完成整个操纵。
分享到：
相关推荐
在IE中，如果doctype声明了，这两个属性会返回可见区域的宽度和高度；而在Firefox和Opera中，它们则包含`<body>`的margin，因此返回的是整个页面的宽度和高度。 2. **可见区域宽高** - `document.body....
DOCTYPE声明对JavaScript的具体影响。 首先，了解!DOCTYPE声明的具体作用至关重要。!DOCTYPE声明位于HTML文档的最顶部，用于告知浏览器页面使用的HTML或XHTML规范的版本。浏览器根据!DOCTYPE声明决定页面的渲染模式...
获取浏览器窗口的可视区域高度和宽度,滚动条高度有需要的朋友可参考一下。IE中，浏览器显示窗口大小只能以下获取： 代码如下复制代码 代码如下:document.body.offsetWidth document.body.offsetHeight在声明了...
首先，我们有两个基本属性可以用来获取页面的宽度和高度：`document.body.clientWidth` 和 `document.body.clientHeight`。这两个属性分别返回 `<body>` 元素的宽度和高度，不包括滚动条。在 IE、Firefox 和 Opera ...
### JavaScript窗口宽高、鼠标位置、滚动高度详细解析 #### 一、概述 在Web开发中，经常需要获取浏览器窗口的尺寸、鼠标的位置以及页面滚动的距离等信息。这些信息对于响应式设计、交互效果实现等方面至关重要。本...
- **`document.body.clientWidth`** 和 **`document.body.clientHeight`**：这两个属性分别表示文档体的宽度和高度，不包含边框和滚动条。 - **`document.body.offsetWidth`** 和 **`document.body.offsetHeight`**...
本篇文章将详细介绍如何使用JavaScript获取网页的可见区域高度、屏幕分辨率的高度、屏幕可用工作区高度以及浏览器窗口的高度。 首先，我们来看一下网页可见区域的高度和宽度。这部分是指用户当前可以看到的页面区域...
在这种情况下，为了兼容性考虑，应当使用 `document.documentElement` 对象上的相应属性来获取窗口的宽度和高度： - **document.documentElement.clientWidth 和 document.documentElement.clientHeight** - **...
2. `window.innerWidth`和`window.innerHeight`：这两个属性返回浏览器窗口的可视区域的宽度和高度，即用户可以看到的网页部分，不包括滚动条。 3. `document.documentElement.clientWidth`和`document....
`style.width`和`style.height`可以获取或设置元素的宽度和高度，但它们仅考虑内联样式，并且返回的值通常带有单位（如像素）。`style.width`返回的值不包含`padding`和`border`，而`offsetWidth`则包含了这些部分。...
3. JavaScript动态计算：如果需要更复杂的行为，例如根据窗口大小动态调整按钮高度，可以使用JavaScript监听窗口的`resize`事件，并计算按钮内容的高度来设置按钮样式。 二、自动换行 1. 白色空间处理：在HTML中，...
- **获取窗口尺寸**：根据不同的浏览器环境（IE与非IE）采用不同的方法获取窗口的高度和宽度。 - **更新背景图片尺寸**：根据窗口的实际尺寸调整背景图的宽高属性。 #### 详细实现步骤 1. **初始化事件监听**： -...
此外，除了获取浏览器窗口大小，我们还可以获取网页中特定元素的尺寸，如`offsetWidth`和`offsetHeight`属性，它们分别代表元素的外部宽度和高度，即元素的完整尺寸，包括边框和滚动条（如果有的话）。`scrollWidth`...
这个例子会打开一个名为"新窗口"的新窗口，并指定其宽度和高度。 描述中的“javascript 实现提示像google提示的东西”可能是指谷歌搜索中出现的那种自动补全或下拉提示功能。这种效果可以通过监听用户的输入事件，...
这两个属性分别返回浏览器窗口的可视区域宽度和高度，不包括浏览器的工具栏、菜单栏等非内容区域。例如： ```javascript console.log('显示器宽度：', window.innerWidth); console.log('显示器高度：', window....
1. `window.resizeTo(width, height)`：这个方法用于将当前窗口的大小调整到指定的宽度和高度。例如，如果你知道用户的屏幕分辨率，可以尝试设置宽度为屏幕宽度，高度为屏幕高度减去浏览器顶部栏和底部栏的高度，以...
本文将深入探讨如何使用JavaScript有效地定位固定层，特别是在不同的浏览器和DOCTYPE声明下。 首先，我们需要理解在HTML文档中，浏览器如何处理滚动条和元素的位置。在非标准模式（通常是缺少DOCTYPE声明的旧版IE...
在网页开发中，获取当前页面的高度和宽度是常见的需求，特别是在进行页面布局或者动态调整元素尺寸时。在jQuery库中，虽然没有直接提供获取页面高度和宽度的内置方法，但可以通过编写自定义函数来实现这一功能。这里...
Screen 对象详解 ...Screen 对象用于获取客户端显示屏幕的信息，而 Window 对象的 innerWidth/Height 属性用于获取窗口的文档显示区的高度和宽度。了解这两个对象的区别可以帮助我们更好地开发Web应用程序。