当页面实际内容高度大于浏览器可视区域高度时
a. IE下

b. FF下
当页面实际内容高度小于浏览器可视区域高度时
a. IE下
b. FF下
clientHeight
在IE和FF下,该属性没什么差别,都是指浏览器的可视区域,即除去浏览器的那些工具栏状态栏剩下的页面展示空间的高度。
offsetHeight
在IE下,offsetHeight也是浏览器可视区域的高(包括边线)
在FF下,offsetHeight是页面具体内容的高度
scrollHeight
在IE下,scrollHeight 是页面具体内容的高度,可以小于clientHeight
在FF下,scrollHeight 是网页内容高度,不过最小值是clientHeight
下面是跨浏览器取得当前页面的高度的解决方案(比如创建遮罩层时要用到)
function getPageSize(){
//检测浏览器的渲染模式
varbody = (document.compatMode&&document.compatMode.toLowerCase()== "css1compat")?document.documentElement:document.body;
var bodyOffsetWidth = 0;
var bodyOffsetHeight = 0;
var bodyScrollWidth = 0;
var bodyScrollHeight = 0;
var pageDimensions = [0,0];
pageDimensions[0]=body.clientHeight;
pageDimensions[1]=body.clientWidth;
bodyOffsetWidth=body.offsetWidth;
bodyOffsetHeight=body.offsetHeight;
bodyScrollWidth=body.scrollWidth;
bodyScrollHeight=body.scrollHeight;
if(bodyOffsetHeight > pageDimensions[0])
{
pageDimensions[0]=bodyOffsetHeight;
}
if(bodyOffsetWidth > pageDimensions[1])
{
pageDimensions[1]=bodyOffsetWidth;
}
if(bodyScrollHeight > pageDimensions[0])
{
pageDimensions[0]=bodyScrollHeight;
}
if(bodyScrollWidth > pageDimensions[1])
{
pageDimensions[1]=bodyScrollWidth;
}
return pageDimensions;
}
分享到:
相关推荐
例如,`document.body.clientHeight` 和 `document.body.clientWidth` 可以用来确定网页在当前窗口尺寸下的实际可视区域大小。 ### 2. `offsetHeight` 和 `offsetWidth` `offsetHeight` 和 `offsetWidth` 包含了...
- **`document.body.clientWidth`** 和 **`document.body.clientHeight`**:这两个属性分别表示文档体的宽度和高度,不包含边框和滚动条。 - **`document.body.offsetWidth`** 和 **`document.body.offsetHeight`**...
document.body.offsetHeight – 网页可见区域高,包括边线和滚动条的高[FF,chrom下是整个页面高,IE opera 下正常] document.body.scrollWidth – 网页总宽 document.body.scrollHeight – 网页总高 document.body....
### 四种浏览器对_clientHeight、offsetHeight、scrollHeight、clientWidth、offsetWidth 和_scrollWidth 的解析 在前端开发过程中,我们经常会遇到需要获取页面元素尺寸的情况,这其中包括了元素的高度(`...
网页可见区域高: document.body.clientHeight;网页可见区域宽: document.body.offsetWidth (包括边线的宽);网页可见区域高: document.body.offsetHeight (包括边线的宽);网页正文全文宽: document.body....
在IE和FF中的区别,主要是表现在获取宽度(clientWidth和offsetWidth)和高度(clientHeight和offsetHeight)时的差异。clientWidth和clientHeight属性返回元素的内部宽度和高度,即元素内容区域的宽高,不包括边框...
- **`document.body.clientHeight`**:表示网页内容显示区域的高度,同样不包括边框和滚动条。 - **`document.body.offsetWidth`**:表示网页内容显示区域加上边框的总宽度。 - **`document.body.offsetHeight`**...
- `document.body.offsetWidth` 和 `document.body.offsetHeight` 则包括边线宽度,提供整个元素(包括边框)的可见宽度和高度。 - `document.body.scrollWidth` 和 `document.body.scrollHeight` 分别表示网页...
} else if (document.body.scrollHeight > document.body.offsetHeight) { // all but Explorer Mac xScroll = document.body.scrollWidth; yScroll = document.body.scrollHeight; } else { // Explorer Mac ...
例如,`clientWidth` 和 `clientHeight` 在IE6.0中不包括边框,而在FF1.06+中则包含。`offsetWidth` 和 `offsetHeight` 在IE中包括内容、内边距和边框,但在Firefox中仅包括内容和内边距。 在实际应用中,开发者...
1. 网页可见区域尺寸:通过`document.body.clientWidth`和`document.body.clientHeight`可以获取网页的可见区域宽度和高度,而`document.body.offsetWidth`和`document.body.offsetHeight`则包括边框在内的宽度和...
例如,`document.documentElement.scrollHeight` 和 `document.body.scrollHeight` 是两个常见的获取页面高度的方法,但在IE和Chrome中,前者可能更准确,而在Firefox中,后者可能更准确。为了解决这个问题,我们...
s += " 网页可见区域高:"+ document.body.offsetHeight +" (包括边线的宽)"; s += " 网页正文全文宽:"+ document.body.scrollWidth; s += " 网页正文全文高:"+ document.body.scrollHeight; s += " 网页被卷去...
如IE6.0和FF1.06+版本的浏览器,clientWidth和clientHeight属性的值会包含内边距(padding),而offsetWidth和offsetHeight属性的值还会包含边框(border)。但是,IE5.0/5.5版本的浏览器计算clientWidth和...
#### 四种浏览器对`document.body`的`clientHeight`、`offsetHeight`和`scrollHeight`的解释 JavaScript 中对于页面尺寸的获取主要涉及到几个关键属性:`clientHeight`、`offsetHeight` 和 `scrollHeight`。这些...
例如,IE、Opera 认为 offsetHeight 是包括边框和padding 的高度,而 NS、FF 认为是可视区域的高度。因此,在编写 JavaScript 代码时需要考虑这些差异。 理解 top、clientTop、scrollTop、offsetTop 等属性是非常...
在 IE6.0、FF1.06+ 中,`clientWidth` 和 `clientHeight` 包含了内边距,而 `offsetWidth` 和 `offsetHeight` 包括内边距和边框。但在 IE5.0/5.5 中,`clientWidth` 和 `clientHeight` 不包含边框。 此外,还有一些...
对于`document.body`,`offsetHeight`通常等于可见内容区域加上滚动条和边框的高度。 7. **clientHeight**: `clientHeight`表示元素的可视区域高度,即用户无需滚动就能看到的内容高度,不包括滚动条,但包括内边距...