网页可见区域宽： 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
扩展：在iframe中可以这样使用来获取iframe的高度，用于resizeWindow；
{
var ifr = document.getElementById("iframe");
ifr.contentWindow.document.body.scrollHeight //iframe中全文的高度；
}
在测试中：
在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....
- **document.body.scrollHeight**: 获取的是网页正文的实际高度，包括不可见部分，单位为像素。 ### 3. 滚动条位置 通过获取滚动条的位置，可以实现实时滚动监测等功能。 - **document.body.scrollTop**: 获取...
总结，JavaScript获取网页高度和宽度的方法多种多样，可以根据具体需求选择合适的方式。了解这些知识对于提升网页交互体验和实现动态布局至关重要。在教育领域，理解并熟练掌握这些技术可以帮助学生更好地构建动态、...
可视区域高度与宽度类似，指的是用户当前可以看见的网页部分的高度。 ```javascript function getClientHeight() { var clientHeight = 0; if (document.body.clientHeight && document.documentElement....
本文将详细介绍几种使用 JavaScript 获取网页宽高的方法，并对比不同浏览器下的表现。 1. `document.body.clientWidth` 和 `document.body.clientHeight` 这两个属性分别返回网页可见区域的宽度和高度，不包括滚动...
在JavaScript中，获取当前页面...以上是关于“javascript获取当前页面可视高度和宽度及浏览器宽度和高度的函数”的主要知识点，通过学习和理解这些内容，开发者可以更好地控制和适应网页在不同设备和窗口大小下的表现。
### JavaScript 获取浏览器的显示区域大小信息 在网页开发过程中，获取浏览器显示区域的大小是非常重要的一个环节，这对于响应式设计、动态布局调整等场景尤为重要。本文将详细介绍如何使用JavaScript来获取浏览器...
通过上述介绍，我们了解了如何使用JavaScript获取当前页面可视区域的高度和宽度，以及浏览器窗口的宽度和高度。这些基本的尺寸信息是进行前端开发不可或缺的一部分，掌握了这些技能，可以更好地进行页面布局和响应式...
JavaScript作为一种广泛应用于网页编程的语言，提供了多种方法来获取屏幕的高度、宽度以及其他相关信息。以下将深入探讨如何使用JavaScript来获取屏幕尺寸和其他关键信息。 ### 一、获取屏幕尺寸 #### 1.1 使用`...
在JavaScript编程中，获取网页的宽高是一项常见的需求，特别是在页面布局、动态调整元素尺寸或者进行响应式设计时。本文将深入探讨如何利用JavaScript来获取浏览器窗口以及网页内容的宽度和高度。 首先，我们需要...
JavaScript获取鼠标坐标是Web开发中的常见需求，尤其在交互式应用和动态效果中扮演着重要角色。本篇文章将详细介绍各种JavaScript方法来获取鼠标位置，并解释它们的用途和差异。 首先，我们可以使用`event`对象来...
1. 页面刚加载时：在`webViewDidFinishLoad:`代理方法中，通过执行JavaScript获取页面总高度，例如上述代码所示。 2. 页面动态更新：如果页面内容是动态加载的，例如通过Ajax，那么需要监听`UIWebView`的`...
本篇文章将详细介绍如何使用JavaScript获取网页的可见区域高度、屏幕分辨率的高度、屏幕可用工作区高度以及浏览器窗口的高度。 首先，我们来看一下网页可见区域的高度和宽度。这部分是指用户当前可以看到的页面区域...
5. 瀑布流布局：瀑布流布局是网页中一种常见的图片展示方式，各列图片高度自适应。通过JavaScript可以实现动态加载和布局调整。 6. 弹出式提示框：用于显示提示信息，如错误消息或成功提示。JavaScript可以创建和...
在网页开发中，如果需要获取浏览器的标题栏高度，可以通过JavaScript的`window.screen.availTop`属性获取屏幕可用区域的顶部距离，这包括了标题栏的高度。不过，这个值可能因浏览器和操作系统而异，因此在实际应用...
标题“js获取网页可见区域、正文以及屏幕分辨率的高度”所涵盖的知识点主要集中在如何使用JavaScript来测量网页上的不同区域的高度。在网站开发和维护过程中，对页面尺寸的精准测量对于页面布局和响应式设计至关重要...
在JavaScript中，获取网页、浏览器和屏幕的高度与宽度是网页布局和动态效果实现中的常见需求。以下是对这些属性和方法的详细解释： 1. **网页可见区域尺寸**： - `document.body.clientWidth`: 这个属性返回网页...
- document.body.scrollHeight：获取网页内容的总高度，同样包括不可见的部分。 当页面存在滚动条时，还可以通过以下属性来获取滚动条已经被滚动的大小： - document.body.scrollTop：当垂直方向上滚动条被滚动时...
例如，可以使用`window.innerWidth`和`window.innerHeight`获取浏览器窗口的宽度和高度，然后据此调整元素的样式。 3. **表单验证**：JavaScript可以实时验证用户输入，避免无效数据提交到服务器。例如，可以检查...