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

阅读: 9 评论: 0 做者: 阿K&LiveCai 发表于 2010-01-02 23:32 原文连接

[建议]用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方法获取各类页面高宽属性了吧^_^!

评论: 0　查看评论　发表评论

找优秀程序员，就在博客园

---

最新新闻：
· 原来全是炒做 传原九城总裁陈晓薇就职火雨CEO(2010-03-30 15:00)
· iPod之父辞任乔布斯顾问 结束9年苹果生涯(2010-03-30 14:57)
· 柳传志：“玩了命”也要作好移动互联网(2010-03-30 14:34)
· 云计算到底算啥 技术派PK商业派(2010-03-30 14:16)
· 苹果联合创始人：iPad很是适合学生和老人(2010-03-30 14:03)

编辑推荐：IE6已被微软宣判死刑 但谁能为它送葬?

网站导航：博客园首页  我的主页  新闻  闪存  小组  博问  社区  知识库