用document.documentElement取代document.body的原因分析_javascript技巧
程序员文章站
2023-12-25 21:05:21
...
IE6在页面内容超出窗口大小时将宽度属性scrollWidth、clientWidth、offsetWidth都解释为内容实际宽度。
上次的测试说明了document.body属性并不会给我们返回预期的结果,比如我们用document.body.clientHeight原本想取得“页面可见区域高度”,可实际上返回的是“页面实际内容高度”。
那我们怎么办呢?难道加上了文档DTD类型之后就再也不能取到“可见区域高度”和“内容实际宽度”等等属性了吗?
documentElement
内容高度是400PX,点击查看所有属性值
其实,我们可以用document.documentElement代替document.body来获取我们想要的结果 将代码中的document.body替换为document.documentElement,再来看看各浏览器下的实际结果:
ii测试结果表明,IE系列浏览器对document.documentElement属性的解释是正确的,其它标准浏览器将offsetHeight解释成 了scrollHeight。火狐和netscape更是把这两个属性调换了过来。不过总的来说各属性都可以有个相应的解释,不会像 document.body一样只有可怜的两种解释。
终于可以放心地使用JS方法获取各种页面高宽属性了吧^_^!
上次的测试说明了document.body属性并不会给我们返回预期的结果,比如我们用document.body.clientHeight原本想取得“页面可见区域高度”,可实际上返回的是“页面实际内容高度”。
那我们怎么办呢?难道加上了文档DTD类型之后就再也不能取到“可见区域高度”和“内容实际宽度”等等属性了吗?
复制代码 代码如下:
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方法获取各种页面高宽属性了吧^_^!
推荐阅读
-
用document.documentElement取代document.body的原因分析_javascript技巧
-
用document.documentElement取代document.body的原因分析_javascript技巧
-
避免 showModalDialog 弹出新窗体的原因分析_javascript技巧
-
能说明你的Javascript技术很烂的五个原因分析_javascript技巧
-
避免 showModalDialog 弹出新窗体的原因分析_javascript技巧
-
js报错 Object doesn't support this property or method的原因分析_javascript技巧
-
能说明你的Javascript技术很烂的五个原因分析_javascript技巧
-
关于获取DIV内部内容报错的原因分析及解决办法_javascript技巧
-
js报错 Object doesn't support this property or method的原因分析_javascript技巧
-
关闭页面时window.location事件未执行的原因分析及解决方案_javascript技巧