标准模式下(使用*{margin:0px;padding:0px},ie,opera,webkit body默认有margin,8px,ff没有):
body类似于block,宽度auto,高度auto,自伸缩
貌似ie6,7一直有垂直滚动条(标准模式下是html的,怪异模式下是body的),opera一直有垂直和水平滚动条(是html的),
hidden滚动条的时候还会出现一些现象...(没有测试)
html为实际视口的高宽:
没出滚动条的时候:
document.body值基本正常,clientWidth和documentElement相同,height为0
opera10:
document.documentElement.clientWidth,document.documentElement.clientHeight,取值正常
document.documentElement.scrollwidth为视口宽度,等于clientWidth
document.documentElement.scrollHeight==2, ???
ie6,7:
document.documentElement.clientWidth,document.documentElement.clientHeight,取值正常
document.documentElement.scrollwidth==2 ???
document.documentElement.scrollHeight==20 ???
webkit(safari4,chrome2):
document.body.scrollHeight可以取到高度,等于document.documentElement.clientHeight
document.documentElement.scrollHeight==0 ???
ff3:
貌似完美
出滚动条的时候(body内放一个很大的div):
ie6:
document.body.clientWidth,document.body.clientHeight,document.body.scrollWidth,document.body.scrollHeight
和document.documentElement.scrollwidth document.documentElement.scrollHeight值一样
document.documentElement.clientWidth document.documentElement.clientHeight值为视口的宽高
ie7:
和ie6类似,唯一不同之处是document.body.clientWidth为视口宽度
FF3:
document.documentElement.scrollwidth document.documentElement.scrollHeight正常
document.documentElement.clientWidth document.documentElement.clientHeight正常,值为视口的宽高
document.body.clientWidth为视口宽度,document.body.clientHeight为document.documentElement.scrollHeight高度
webkit:
和ie7类似
opera:
和ie7类似,不同之处在于document.body.scrollWidth==document.body.clientWidth;
怪异模式下:
没滚动条的时候:
ie6: document.body.clientWidth差document.documentElement.scrollwidth 20像素,
document.body.clientHeight差document.documentElement.scrollHeight 2像素
document.body.scrollWidth,document.body.scrollHeight分别为2和20 ???
document.documentElement.clientWidth document.documentElement.clientHeight为0,0
ie7: 类似IE6
ff3: document.body.clientWidth==document.body.scrollwidth
document.body.clientHeight==document.body.scrollHeight 取值正常
document.documentElement.scrollWidth==document.body.clientWidth
document.documentElement.clientHeight==document.documentElement.scrollHeight==0
opera10:
类似ff3
webkit:
document.body.clientWidth==document.body.scrollwidth ==document.documentElement.clientWidth==document.documentElement.scrollWidth
document.body.clientHeight==document.body.scrollHeight==document.documentElement.clientHeight==document.documentElement.scrollHeight
有滚动条情况下(body内放一个很大的div):
ie6:
和没滚动条类似,document.body.scrollWidth,document.body.scrollHeight取到带滚动的高宽
ie7:
和IE6类似
ff3:
document.body值正常
document.documentElement.clientWidth==document.documentElement.scrollWidth==document.body.clientWidth
document.documentElement.clientHeight==document.documentElement.scrollHeight==document.body.scrollHeight
opera10:
类似于ff3
webkit:
document.body值正常
document.documentElement值正常(除过document.documentElement.clientHeight==document.documentElement.scrollHeight==document.body.scrollHeight)
分享到:
相关推荐
- 在不同的浏览器中,获取页面宽度和高度的方法可能略有不同: - **Internet Explorer**: - `document.body.clientWidth` 返回 `BODY` 元素的宽度。 - `document.body.clientHeight` 返回 `BODY` 元素的高度。 ...
在JavaScript编程语言中,获取网页的高度和宽度是常见的需求,特别是在动态布局、页面滚动或响应式设计中。本文将深入探讨如何使用JavaScript有效地获取这些信息,并结合实际应用场景进行讲解。 一、窗口对象...
### JavaScript 获取滚动条高度、页面宽度与高度 在前端开发中,经常需要处理与浏览器窗口相关的操作,例如响应式设计、动态布局调整等。本文将详细介绍如何使用JavaScript来获取滚动条的高度、页面的宽度和高度。 ...
在 Opera 中,`document.documentElement.clientWidth` 可以获取页面临象的宽度,`document.documentElement.clientHeight` 可以获取页面临象的高度。 3. 使用 `window` 对象: `window.screenTop` 可以获取网页...
对于页面元素的尺寸,可以使用document.body的client系列属性来获取页面内容区域的尺寸。document.body.clientWidth和document.body.clientHeight分别返回内容区域的宽度和高度,但不包括边框和滚动条。如果想要获取...
本文将详细讲解如何使用jQuery获取屏幕的高度和宽度,这对于创建响应式网页设计或者根据屏幕尺寸调整元素布局至关重要。 首先,我们需要了解什么是屏幕高度和宽度。屏幕高度是指浏览器窗口可视区域的垂直尺寸,而...
在JavaScript中,获取浏览器的高度和宽度是常见的需求,这有助于我们进行页面布局、响应式设计或者自适应调整。本文将详细解析如何通过JavaScript获取不同浏览器中的浏览器高度、宽度以及相关的一些其他尺寸信息。 ...
JavaScript是Web开发中不可或缺的一部分,尤其在处理页面布局和交互时。...这些JavaScript属性和方法对于理解页面布局和交互至关重要,熟练掌握它们能帮助开发者更高效地控制网页元素的显示和行为。
在JavaScript中,获取浏览器的高度和宽度是常见的需求,这在进行网页布局、动态调整元素尺寸或者实现滚动事件处理时尤其重要。以下将详细介绍如何通过JavaScript获取这些信息,并探讨不同浏览器间可能存在的差异。 ...
* `document.documentElement.clientWidth`: 获取页面对象的宽度(即 BODY 对象宽度加上 Margin 宽)。 * `document.documentElement.clientHeight`: 获取页面对象的高度(即 BODY 对象高度加上 Margin 高)。 其他...
通过 `document.body.clientWidth` 和 `document.body.clientHeight`,我们可以获取到网页可见区域的宽度和高度,而通过 `window.innerWidth` 和 `window.innerHeight`,我们可以获取浏览器窗口的宽度和高度。...
JavaScript 获取当前页面可视高度和宽度及浏览器宽度和高度的函数 在Web开发中,获取当前页面的可视高度和宽度,以及浏览器的宽度和高度是非常重要的。这篇文章将为大家讲解如何使用JavaScript来获取这些信息。 ...
在网页开发中,`iframe`(Inline Frame)是一种嵌入其他网页的标签,常用于将外部内容如视频、地图或文章等内容嵌入到当前页面中。然而,由于`iframe`的大小固定,当嵌入的页面内容高度或宽度超过`iframe`设定的尺寸...
- `document.body.scrollWidth` 和 `document.body.scrollHeight` 分别表示网页的完整宽度和高度,即使内容超过当前视口。 - `document.body.scrollTop` 和 `document.body.scrollLeft` 用于获取当前滚动条的位置。 ...
在前端开发中,经常需要对页面元素进行操作,包括获取元素的尺寸信息。然而,当我们尝试获取一个CSS样式为display:none的元素的高度和宽度时,会发现常规的JavaScript方法无法直接获取这些尺寸值,因为display:none...
在JavaScript中,获取当前页面...以上是关于“javascript获取当前页面可视高度和宽度及浏览器宽度和高度的函数”的主要知识点,通过学习和理解这些内容,开发者可以更好地控制和适应网页在不同设备和窗口大小下的表现。
首先,我们有两个基本属性可以用来获取页面的宽度和高度:`document.body.clientWidth` 和 `document.body.clientHeight`。这两个属性分别返回 `<body>` 元素的宽度和高度,不包括滚动条。在 IE、Firefox 和 Opera ...
下面给出一个简单的使用示例,展示如何在页面加载完成后获取屏幕尺寸信息,并将其显示出来: ```javascript $(document).ready(function() { // 获取并显示当前窗口的高度 alert($(window).height()); // 当前...