`

document.body.clientHeight 取高度出错问题

 
阅读更多

  有时候需要取页面的底部, 就会用到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

分享到:
评论

相关推荐

    document.body.scrollTop用法

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

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

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

    document.documentElement和document.body区别介绍

    在这个模式下,document.documentElement的clientHeight可能返回0,而document.body的clientHeight则可以获取到可视区域的高度。在有DTD声明的情况下,浏览器会采用标准模式。在这个模式下,document....

    javascript 获取网页高度宽度.pdf

    - `document.body.clientWidth` 和 `document.body.clientHeight` 分别返回 `BODY` 元素的宽度和高度。 - `document.documentElement.clientWidth` 和 `document.documentElement.clientHeight` 分别返回可视区域...

    javascript获取滚动条高度 页面宽度与高度

    - `document.body.clientWidth`和`document.body.clientHeight`分别表示`BODY`的宽度和高度。 - `document.documentElement.clientWidth`和`document.documentElement.clientHeight`分别表示`HTML`的宽度和高度。 ...

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

    上次的测试说明了document.body属性并不会给我们返回预期的结果,比如我们用document.body.clientHeight原本想取得“页面可见区域高度”,可实际上返回的是“页面实际内容高度”。 那我们怎么办呢?难道加上了文档...

    取框架/body的高度height

    - 与IE类似,`document.body.clientWidth`和`document.body.clientHeight`分别获取`body`的宽度和高度。 - 同样,`document.documentElement.clientWidth`和`document.documentElement.clientHeight`获取整个文档...

    javascript 获取当前页面可视高度和宽度及浏览器宽度和高度的函数.pdf

    windowHeight = document.body.clientHeight; } // for small pages with total height less then height of the viewport if(yScroll ){ pageHeight = windowHeight; } else { pageHeight = yScroll; } ...

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

    1. `document.body.clientWidth` 和 `document.body.clientHeight` 也分别返回BODY元素的宽度和高度,与IE相同。 2. 不同的是,`document.documentElement.clientWidth` 和 `document.documentElement.clientHeight`...

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

    * 在 FireFox 中,`document.body.clientHeight` 和 `document.body.clientWidth` 获取的是可见区域的高度和宽度 * 在 Opera 中,`document.body.clientHeight` 和 `document.body.clientWidth` 获取的是可见区域的...

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

    - `document.body.clientWidth` 和 `document.body.clientHeight` 同样返回BODY对象的宽度和高度。 - `document.documentElement.clientWidth` 和 `document.documentElement.clientHeight` 返回的是包含边距的页面...

    javascript 获取当前面可视高度和宽度及浏览器宽度和高度的函数.docx

    - `document.body.clientHeight` 和 `document.body.clientWidth`:其他IE版本和其他浏览器使用。 #### 五、实际应用 在实际开发中,通常还需要考虑以下几点: 1. **性能优化**:频繁调用这些函数可能会对页面...

    不出现滚动条移动表格

    var clientHeight = (document.body.clientHeight&lt;document.documentElement.clientHeight)?document.body.clientHeight:document.documentElement.clientHeight; } else { var clientHeight = (document....

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

    `document.body.clientWidth` 可以获取网页可见区域的宽度,`document.body.clientHeight` 可以获取网页可见区域的高度。 `document.body.offsetWidth` 可以获取网页可见区域的宽度,包括边线的宽,`document.body....

    Javascript 获取页面高度(多种浏览器)

    首先,我们有两个基本属性可以用来获取页面的宽度和高度:`document.body.clientWidth` 和 `document.body.clientHeight`。这两个属性分别返回 `&lt;body&gt;` 元素的宽度和高度,不包括滚动条。在 IE、Firefox 和 Opera ...

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

    - `document.body.clientHeight`: 获取网页可见区域高度,不包括滚动条。 - `document.body.offsetWidth`: 获取网页可见区域宽,包括边线的宽。 - `document.body.offsetHeight`: 获取网页可见区域高,包括边线的宽...

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

    winH = document.body.clientHeight; } // for small pages with total size less then the viewport var pageW = (scrW) ? winW : scrW; var pageH = (scrH) ? winH : scrH; return {PageW:pageW, ...

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

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

    由document.body和document.documentElement想到的

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

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

    - `document.body.clientWidth` 和 `document.body.clientHeight`: 这两个属性分别返回`&lt;body&gt;`元素的宽度和高度,不包括滚动条和边框。在IE和Firefox中,它们可以用于获取可见区域的宽度和高度。在Opera中,`...

Global site tag (gtag.js) - Google Analytics