冇内容管理系统分析-用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方法获取各种页面高宽属性了吧^_^!
posted @ 2010-01-02 23:32  阿K&LiveCai  阅读(382)  评论(0)  编辑  收藏  举报