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

[建议]用document.documentElement代替document.body&＃xff08;转&＃xff09;

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

• body.scrollHeight&＃61;内容实际高度&＃xff1b;
• body.scrollWidth&＃61;可视区域宽度&＃xff1b;
• body.clientHeight&＃61;内容实际高度&＃xff1b;
• body.clientWidth&＃61;可视区域宽度&＃xff1b;
• body.offsetHeight&＃61;内容实际高度&＃xff1b;
• body.offsetWidth&＃61;可视区域宽度&＃xff1b;

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

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

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

Code

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

将代码中的document.body替换为document.documentElement&＃xff0c;再来看看各浏览器下的实际结果&＃xff1a;

IE6:


IE7:


FF3:


opera9:


safari:


netscape9:


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

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

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

找优秀程序员&＃xff0c;就在博客园

---

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

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

网站导航&＃xff1a;博客园首页  个人主页  新闻  闪存  小组  博问  社区  知识库