<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高）
真是一件麻烦事情，其实就开发来看，宁可少一些对象和方法，不使用最新的标准要方便许多啊。
有时候需要取页面的底部, 就会用到document.body.clientHeight , 在HTML 标准中(这一句就能取到整个页面的高度, 不论body 的实际内容到底有多高, 例如, 1074*768 的分辨率, 页面最大化时, 这个高度约为720 , 即使页面上只有一句”hello world” , 也仍然取到720.
可是在XHTML中, 如果body 体中只有一行, 则document.body.clientHeight 只能取到那一行的高度, 约20px, 这时如何还想取到整个页面的高度, 就要用document.documentElement.clientHeight 来获取了.
原因是: 在HTML 中, body 是整个DOM 的根, 而在XHTML 中, document 才是根, body 不再是根, 所以取body 的属性时, 不能再取到整个页面的值.
区别新旧标准的行是:
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.0 Transitional//EN” >
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd“>
前者指明该页面使用旧标准, 后者指明该页面使用新标准.
总结:
XHTML中用 document.documentElement.clientHeight 代替
document.body.clientHeight
分享到：
相关推荐
以下是一些关于如何使用JavaScript获取网页高度、宽度以及滚动位置的关键知识点。 1. **获取窗口滚动位置：** - `getScrollTop()` 函数用于获取当前页面滚动条的垂直偏移量。这个函数通过检查 `document....
本文将深入探讨如何使用 JavaScript 在不同浏览器中获取页面高度。 首先，我们有两个基本属性可以用来获取页面的宽度和高度：`document.body.clientWidth` 和 `document.body.clientHeight`。这两个属性分别返回 `...
总结，JavaScript获取网页高度和宽度的方法多种多样，可以根据具体需求选择合适的方式。了解这些知识对于提升网页交互体验和实现动态布局至关重要。在教育领域，理解并熟练掌握这些技术可以帮助学生更好地构建动态、...
本篇文章将详细介绍如何使用JavaScript获取网页的可见区域高度、屏幕分辨率的高度、屏幕可用工作区高度以及浏览器窗口的高度。 首先，我们来看一下网页可见区域的高度和宽度。这部分是指用户当前可以看到的页面区域...
在JavaScript编程语言中，开发者经常需要获取与网页和屏幕尺寸相关的数据，比如页面的可视区域、文档的实际大小以及用户屏幕的有效工作区等信息。这些数据对于优化网站布局、响应式设计以及实现某些交互功能至关重要...
### JavaScript 获取滚动条高度、页面宽度与高度 在前端开发中，经常需要处理与浏览器窗口相关的操作，例如响应式设计、动态布局调整等。本文将详细介绍如何使用JavaScript来获取滚动条的高度、页面的宽度和高度。 ...
在JavaScript（JS）中，获取iframe（内联框架）的高度是一项常见的需求，特别是在构建富互联网应用或嵌入第三方内容时。下面将详细讲解如何静态和动态地获取iframe的高度。 一、静态获取iframe高度 1. **DOM属性...
此外，需要注意的是，随着Web技术的发展，用户设备的多样性也日益增加，因此在使用JavaScript获取尺寸信息时，除了使用文档对象模型（DOM）属性和方法之外，还可能需要依赖于CSSOM（CSS对象模型）和HTML元素的实时...
`document.body.offsetWidth` 可以获取网页可见区域的宽度，包括边线的宽，`document.body.offsetHeight` 可以获取网页可见区域的高度，包括边线的高。 2. 使用 `document.documentElement` 对象： 在 IE 中，`...
JS 获取页面控件坐标 在 HTML 文档中，获取页面控件坐标是非常重要的，特别是在进行交互式开发时。今天，我们将讨论如何使用 JavaScript 获取页面控件坐标。 在 HTML 文档中，每个元素都有其自己的坐标系，通过...
然而，当我们尝试获取一个CSS样式为display:none的元素的高度和宽度时，会发现常规的JavaScript方法无法直接获取这些尺寸值，因为display:none的元素没有物理尺寸。为了获得这些隐藏元素的尺寸信息，需要采用一些...
在JavaScript编程中，获取网页的宽高是一项常见的需求，特别是在页面布局、动态调整元素尺寸或者进行响应式设计时。本文将深入探讨如何利用JavaScript来获取浏览器窗口以及网页内容的宽度和高度。 首先，我们需要...
本文将详细解析如何通过JavaScript获取不同浏览器中的浏览器高度、宽度以及相关的一些其他尺寸信息。 1. **浏览器高度和宽度的获取** - `document.body.clientWidth` 和 `document.body.clientHeight`: 这两个...
JavaScript作为一种广泛应用于网页编程的语言，提供了多种方法来获取屏幕的高度、宽度以及其他相关信息。以下将深入探讨如何使用JavaScript来获取屏幕尺寸和其他关键信息。 ### 一、获取屏幕尺寸 #### 1.1 使用`...
2. 页面动态更新：如果页面内容是动态加载的，例如通过Ajax，那么需要监听`UIWebView`的`scrollViewDidScroll:`方法，或者通过JS监控滚动事件，实时获取当前页面高度。 总结，`ios webView获取高度`涉及到UIWebView...
### JavaScript 获取浏览器的显示区域大小信息 在网页开发过程中，获取浏览器显示区域的大小是非常重要的一个环节，这对于响应式设计、动态布局调整等场景尤为重要。本文将详细介绍如何使用JavaScript来获取浏览器...
代码如下: [removed] //得到页面高度 var yScroll = (document.documentElement.scrollHeight >document.documentElement.clientHeight) ? document.documentElement.scrollHeight : document.documentElement....
### JS 获取屏幕分辨率的方法 在Web开发中，获取用户的屏幕分辨率是实现响应式设计和优化用户体验的重要步骤之一。本文将详细介绍如何使用JavaScript来获取屏幕分辨率，并探讨这些信息如何帮助我们实现div元素的...