`
zhuixue
  • 浏览: 174198 次
  • 性别: Icon_minigender_1
  • 来自: 天津
社区版块
存档分类
最新评论

document.body.clientWidth、scrollWidth、scrollTop;

    博客分类:
  • js
阅读更多

function gets()
{
var s ="网页可见区域宽:"+ document.body.clientWidth;
s += "<br>网页可见区域高:" + document.body.clientHeight;
s += "<br>网页可见区域宽:" + document.body.offsetWidth +" (包括边线的宽)";
s += "<br>网页可见区域高:" + document.body.offsetHeight +" (包括边线的宽)";
s += "<br>网页正文全文宽:" + document.body.scrollWidth;
s += "<br>网页正文全文高:" + document.body.scrollHeight;
s += "<br>网页被卷去的高:" + document.body.scrollTop;
s += "<br>网页被卷去的左:" + document.body.scrollLeft;
s += "<br>网页正文部分上:" + window.screenTop;
s += "<br>网页正文部分左:" + window.screenLeft;
s += "<br>屏幕分辨率的宽:" + window.screen.width;
s += "<br>屏幕分辨率的高:" + window.screen.height;
s += "<br>屏幕可用工作区宽度:" + window.screen.availWidth;
s += "<br>屏幕可用工作区高度:" + window.screen.availHeight;
document.getElementById('dd').innerHTML = s;
}

 

有时会出现取不到值的情况,是因为我的HTML文件头部加了文档类型。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

 

解决办法:

1.去掉头部文档类型。

2.把document.body.scrollTop和document.body.scrollLeft这两个家伙改个名字:

document.documentElement.scrollTop 和document.documentElement.scrollLeft。

当然document.body.clientWidth和document.body.clientHeight也要改名字了,改为:document.documentElement.clientWidth和document.documentElement.clientHeight

 

分享到:
评论
1 楼 TTLtry 2009-11-29  
  比较常用的document.body 对象,时不时的会用到计算窗体,正文,屏幕的height,width,巩固一下

相关推荐

    document.body.scrollTop用法

    - **document.body.clientWidth**: 表示网页可见区域的宽度(不包含滚动条)。 - **document.body.clientHeight**: 表示网页可见区域的高度(不包含滚动条)。 - **document.body.offsetWidth**: 包含边框在内的网页...

    js中的如何定位固定层的位置.docx

    - `document.body.scrollWidth`: 获取网页正文全文宽,即使内容超出了可视区域。 - `document.body.scrollHeight`: 获取网页正文全文高,即使内容超出了可视区域。 - `document.body.scrollTop`: 获取网页被卷去的高...

    JS,Jquery获取各种屏幕的宽度和高度

    1. **`document.body.clientWidth`** 和 **`document.body.clientHeight`**: - 这两个属性分别用于获取可视区域的宽度和高度,不包括滚动条和边框。 2. **`document.body.offsetWidth`** 和 **`document.body....

    获取页面长宽和滚动条的位置

    scrW = document.body.scrollWidth; scrH = document.body.scrollHeight; } else if(document.body) { // IE Mac scrW = document.body.offsetWidth; scrH = document.body.offsetHeight; } var...

    js获取浏览器高度和宽度值(多浏览器)

    - `document.body.scrollWidth` 和 `document.body.scrollHeight` 分别表示网页的完整宽度和高度,即使内容超过当前视口。 - `document.body.scrollTop` 和 `document.body.scrollLeft` 用于获取当前滚动条的位置。 ...

    用document.documentElement取代document.body的原因分析

    IE6在页面内容超出窗口大小时将宽度属性scrollWidth、clientWidth、offsetWidth都解释为内容实际宽度。 上次的测试说明了document.body属性并不会给我们返回预期的结果,比如我们用document.body.clientHeight原本想...

    JS获取浏览器的高度和宽度

    - `document.body.scrollTop` 和 `document.body.scrollLeft` 是用来获取或设置网页在垂直和水平方向上的滚动位置。 - `window.screen.height` 和 `window.screen.width` 则提供了屏幕分辨率的高度和宽度,而不是...

    关于获取各种浏览器可见窗口大小

    - **`document.body.clientWidth`** 和 **`document.body.clientHeight`**:这两个属性分别表示文档体的宽度和高度,不包含边框和滚动条。 - **`document.body.offsetWidth`** 和 **`document.body.offsetHeight`**...

    js获取文本框的值!js获取浏览器高度和宽度值[收集].pdf

    * `document.body.scrollWidth`:获取浏览器的正文全文宽度 * `document.body.scrollHeight`:获取浏览器的正文全文高度 * `document.body.scrollTop`:获取浏览器的被卷去的高度 * `document.body.scrollLeft`:...

    由document.body和document.documentElement想到的

    1. `document.body.clientWidth`和`clientHeight`返回浏览器视口的宽度和高度,不包括滚动条。 2. `document.body.offsetWidth`和`offsetHeight`则包括了边框的宽度。 3. `document.body.scrollWidth`和`...

    javascript document.compatMode兼容性

    document.body.scrollTop : document.documentElement.scrollTop; } ``` 这段代码首先检查`document.compatMode`,如果为`BackCompat`,那么它使用`document.body`来获取页面尺寸和滚动条信息;如果为`CSS1Compat`...

    js获取浏览器高度和宽度值.pdf

    - `document.body.scrollWidth` 和 `document.body.scrollHeight`: 这两个属性返回`&lt;body&gt;`元素的完整宽度和高度,即使内容超出了可视区域。它们包含滚动条下的所有内容。 - `document.body.scrollTop` 和 `...

    js常用代码集锦.

    - `document.body.clientWidth`: 只包含内容区域的宽度,不包括滚动条和边框。 - `document.body.clientHeight`: 只包含内容区域的高度,不包括滚动条和边框。 - `document.body.offsetWidth`: 包括内容、内边距...

    js获取屏幕分辨率的方法

    - `document.body.clientWidth` 和 `document.body.clientHeight` 分别代表BODY对象的宽度和高度。 - `document.documentElement.clientWidth` 和 `document.documentElement.clientHeight` 表示可见区域的宽度和...

    javascript获取网页宽高方法汇总

    document.body.clientWidth – 网页可见区域宽 document.body.clientHeight – 网页可见区域高 document.body.offsetWidth – 网页可见区域宽,包括边线和滚动条的宽 document.body.offsetHeight – 网页可见区域高...

    js中top、clientTop、scrollTop、offsetTop的区别 文字详细说明版

    网页可见区域宽: document.body.clientWidth;网页可见区域高: document.body.clientHeight;网页可见区域宽: document.body.offsetWidth (包括边线的宽);网页可见区域高: document.body.offsetHeight (包括边线...

    javascript获取网页宽高方法汇总.docx

    3. `document.body.scrollWidth` 和 `document.body.scrollHeight` 这两个属性返回网页的总宽度和总高度,包括不可见部分,即使内容超出了浏览器的可视区域。这意味着它们会反映出用户滚动后可以看到的所有内容的...

    JS获取浏览器窗口大小

    - 在支持的浏览器中使用 `window.innerWidth` 和 `window.innerHeight` 替代 `document.body.clientWidth` 和 `document.body.clientHeight`。 #### 四、总结 通过本文的介绍,我们可以了解到获取浏览器窗口大小的...

    js菜鸟笔记之图片飘动_ekom.cn

    windowWidth = document.body.clientWidth; windowHeight = document.body.clientHeight; } if (yScroll ) { pageHeight = windowHeight; } else { pageHeight = yScroll; } // 这里省略了返回值的部分代码...

Global site tag (gtag.js) - Google Analytics