转自:http://developer.51cto.com/art/200805/72909.htm
//关于获取各种浏览器可见窗口大小的一点点研究。
//在我本地测试当中:
//在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的标准在作怪啊
//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高)
//真是一件麻烦事情,其实就开发来看,宁可少一些对象和方法,不使用最新的标准要方便许多啊。
分享到:
相关推荐
总之,获取页面高度和宽度是 JavaScript 开发中的常见任务,但需要注意浏览器的兼容性和差异。正确的方法是使用兼容性好的代码,以确保在所有主流浏览器中都能得到期望的结果。理解 `document.body` 和 `document....
最后,考虑到页面内容可能小于视口高度,函数会根据实际情况返回页面高度或视口高度。 2. **getWidth() 函数**:与 `getHeight()` 类似,这个函数用于获取当前页面可视区域的宽度。它首先检查 `window.innerWidth` ...
通过上述介绍,我们了解了如何使用JavaScript获取当前页面可视区域的高度和宽度,以及浏览器窗口的宽度和高度。这些基本的尺寸信息是进行前端开发不可或缺的一部分,掌握了这些技能,可以更好地进行页面布局和响应式...
类似地,获取页面高度也可以采用类似的方法。 总之,JavaScript提供了多种方法来获取网页的高度、宽度和滚动位置,但需要注意的是,由于浏览器之间的差异,需要编写兼容性代码以确保在所有环境中都能正常运行。...
总结,JavaScript获取网页高度和宽度的方法多种多样,可以根据具体需求选择合适的方式。了解这些知识对于提升网页交互体验和实现动态布局至关重要。在教育领域,理解并熟练掌握这些技术可以帮助学生更好地构建动态、...
通过上述介绍,我们可以看到JavaScript提供了多种方式来获取浏览器显示区域的大小信息。开发者可以根据具体需求选择合适的方法,并注意处理不同浏览器之间的兼容性问题,从而实现更加灵活和响应式的网页布局。
在 Opera 中,`document.documentElement.clientWidth` 可以获取页面临象的宽度,`document.documentElement.clientHeight` 可以获取页面临象的高度。 3. 使用 `window` 对象: `window.screenTop` 可以获取网页...
本文将详细介绍如何在多种浏览器环境下,包括IE、Firefox和Chrome等,获取浏览器的宽度和高度。 首先,我们来看IE浏览器中的方法: 1. `document.body.clientWidth`:返回BODY元素的宽度,不包括滚动条和边框。 2....
JavaScript作为一种广泛应用于网页编程的语言,提供了多种方法来获取屏幕的高度、宽度以及其他相关信息。以下将深入探讨如何使用JavaScript来获取屏幕尺寸和其他关键信息。 ### 一、获取屏幕尺寸 #### 1.1 使用`...
以下将详细介绍如何通过JavaScript获取这些信息,并探讨不同浏览器间可能存在的差异。 首先,我们可以使用`window.innerWidth`和`window.innerHeight`来获取浏览器窗口的总宽度和高度,包括工具栏和其他用户界面...
### 解决多种浏览器获取滚动条高度 在网页开发过程中,我们经常会遇到与浏览器兼容性相关的问题,尤其是在处理页面滚动相关的功能时。不同的浏览器对于某些属性的实现方式可能存在差异,这就要求开发者能够编写出...
获取页面对象的宽度和高度(Opera 特有) - **`document.documentElement.clientWidth`**: 返回页面对象宽度(即 BODY 对象宽度加上 Margin 宽度)。 - **`document.documentElement.clientHeight`**: 返回页面...
使用JavaScript(简称JS),开发者可以通过多种方式获取屏幕的高度和宽度,以及页面元素的尺寸信息。 首先,要获取屏幕的宽度和高度,可以使用window对象提供的screen属性。具体来说,可以使用window.screen.width...
#### JavaScript获取屏幕尺寸 在原生JavaScript中,可以通过多种方法来获取屏幕的宽度和高度,具体如下: 1. **`document.body.clientWidth`** 和 **`document.body.clientHeight`**: - 这两个属性分别用于获取...
本文主要探讨了JavaScript中获取和判断浏览器窗口、屏幕以及网页高度和宽度的方法,这对于网页布局和响应式设计至关重要。在JavaScript中,有多种属性和方法可以用来获取不同维度的尺寸信息。 首先,我们关注的是...
本主题将深入探讨如何利用CSS和JavaScript实现蒙版的居中技术,并讲解如何使用JavaScript获取div的宽度和高度。 首先,让我们了解CSS中的居中技术。在CSS中,有多种方法可以实现元素的水平和垂直居中。以下是一些...
JavaScript获取鼠标坐标是Web开发中的常见需求,尤其在交互式应用和动态效果中扮演着重要角色。本篇文章将详细介绍各种JavaScript方法来获取鼠标位置,并解释它们的用途和差异。 首先,我们可以使用`event`对象来...
5. **Screen对象**:Screen对象提供了有关用户屏幕的详细信息,如屏幕宽度、高度、颜色深度等。这对于响应式设计或根据用户设备调整内容特别有用。 了解和掌握BOM对象,对于JavaScript开发者来说至关重要,因为它们...