ie6在页面内容超出窗口大小时将宽度属性scrollwidth、clientwidth、offsetwidth都解释为内容实际宽度。
上次的测试说明了document.body属性并不会给我们返回预期的结果，比如我们用document.body.clientheight原本想取得“页面可见区域高度”，可实际上返回的是“页面实际内容高度”。
那我们怎么办呢？难道加上了文档dtd类型之后就再也不能取到“可见区域高度”和“内容实际宽度”等等属性了吗？
复制代码 代码如下:
<script type="text/javascript"> <br>function a() { <br>var scrollTop; <br>var scrollLeft; <br>if (typeof window.pageYOffset != 'undefined') { <br>scrollTop = window.pageYOffset; <br>scrollLeft = window.pageXOffset; <br>} <br>else if (typeof document.compatMode != 'undefined' && document.compatMode != 'BackCompat') { <br>scrollTop = document.documentElement.scrollTop; <br>scrollLeft = document.documentElement.scrollLeft; <br>} <br>else if (typeof document.body != 'undefined') { <br>scrollTop = document.body.scrollTop; <br>scrollLeft = document.body.scrollLeft; <br>} <br>var scrollHeight = document.documentElement.scrollHeight; <br>var scrollWidth = document.documentElement.scrollWidth; <br>var clientWidth = document.documentElement.clientWidth; <br>var clientHeight = document.documentElement.clientHeight; <br>var offsetWidth = document.documentElement.offsetWidth; <br>var offsetHeight = document.documentElement.offsetHeight; <br>var screenTop = window.screenTop; <br>var screenBottom = window.screenBottom; <br>var screenLeft = window.screenLeft; <br>var sheight = window.screen.height; <br>var swidth = window.screen.width; <br>var availHeight = window.screen.availHeight; <br>var availWidth = window.screen.availWidth; <br>document.getElementById('scrollTop').value = scrollTop; <br>document.getElementById('scrollLeft').value = scrollLeft; <br>document.getElementById('scrollHeight').value = scrollHeight; <br>document.getElementById('scrollWidth').value = scrollWidth; <br>document.getElementById('clientWidth').value = clientWidth; <br>document.getElementById('clientHeight').value = clientHeight; <br>document.getElementById('offsetWidth').value = offsetWidth; <br>document.getElementById('offsetHeight').value = offsetHeight; <br>document.getElementById('screenTop').value = screenTop; <br>document.getElementById('screenBottom').value = screenBottom; <br>document.getElementById('screenLeft').value = screenLeft; <br>document.getElementById('sheight').value = sheight; <br>document.getElementById('swidth').value = swidth; <br>document.getElementById('availHeight').value = availHeight; <br>document.getElementById('availWidth').value = availWidth; <br>} <br></script>
| scrollTop（滚动条卷过的高）： | ||
| scrollLeft（滚动条卷过的宽）： | ||
| scrollHeight（内容实际高度）： | ||
| scrollWidth（内容实际宽度）： | ||
| clientWidth（可见区域宽）： | ||
| clientHeight（可见区域高）： | ||
| offsetWidth（加滚动条宽？）： | ||
| offsetHeight（加滚动条高？）： | ||
| screenTop： | ||
| screenBottom： | ||
| screenLeft： | ||
| sheight（分辨率高）： | ||
| swidth（分分辨率宽）： | ||
| availHeight： | ||
| availWidth： |
内容高度是400PX，点击查看所有属性值
其实，我们可以用document.documentElement代替document.body来获取我们想要的结果 将代码中的document.body替换为document.documentElement，再来看看各浏览器下的实际结果：
ii测试结果表明，IE系列浏览器对document.documentElement属性的解释是正确的，其它标准浏览器将offsetHeight解释成 了scrollHeight。火狐和netscape更是把这两个属性调换了过来。不过总的来说各属性都可以有个相应的解释，不会像 document.body一样只有可怜的两种解释。
终于可以放心地使用JS方法获取各种页面高宽属性了吧^_^!
