冇内容管理系统分析-用document.documentElement代替document.body（转）

[建议]用document.documentElement代替document.body（转）

之前写过一篇文章对比了不同浏览器环境对document.body属性的解释，地址是：http://www.silentash.com/blog/2008/62.html
回顾一下，在限定了文档类型的情况下，多数浏览器对document.body属性的解释都是相同的：在加上DTD文档格式后，IE7,FF,OPERA这三个浏览器表现出了惊人的一致性，只有IE6在页面内容超出窗口大小时出现了大变化（具体请看IE6部分），也就是说在正常的窗口最大化情况下，四个浏览器对这些属性的解释都是一样的,既：

body.scrollHeight=内容实际高度；
body.scrollWidth=可视区域宽度；
body.clientHeight=内容实际高度；
body.clientWidth=可视区域宽度；
body.offsetHeight=内容实际高度；
body.offsetWidth=可视区域宽度；

IE6在页面内容超出窗口大小时将宽度属性scrollWidth、clientWidth、offsetWidth都解释为内容实际宽度。

上次的测试说明了document.body属性并不会给我们返回预期的结果，比如我们用document.body.clientHeight原本想取得“页面可见区域高度”，可实际上返回的是“页面实际内容高度”。

那我们怎么办呢？难道加上了文档DTD类型之后就再也不能取到“可见区域高度”和“内容实际宽度”等等属性了吗？

Code

其实，我们可以用document.documentElement代替document.body来获取我们想要的结果

将代码中的document.body替换为document.documentElement，再来看看各浏览器下的实际结果：

IE6:

IE7:

FF3:

opera9:

safari:

netscape9:

测试结果表明，IE系列浏览器对document.documentElement属性的解释是正确的，其它标准浏览器将offsetHeight解释成了scrollHeight。火狐和netscape更是把这两个属性调换了过来。不过总的来说各属性都可以有个相应的解释，不会像document.body一样只有可怜的两种解释。

终于可以放心地使用JS方法获取各种页面高宽属性了吧^_^!