Posted in Javascript onNovember 12, 2009
IE6在页面内容超出窗口大小时将宽度属性scrollWidth、clientWidth、offsetWidth都解释为内容实际宽度。
上次的测试说明了document.body属性并不会给我们返回预期的结果,比如我们用document.body.clientHeight原本想取得“页面可见区域高度”,可实际上返回的是“页面实际内容高度”。
那我们怎么办呢?难道加上了文档DTD类型之后就再也不能取到“可见区域高度”和“内容实际宽度”等等属性了吗?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title>documentElement</title> <style type="text/css"> body{margin:0;padding:0;font:12px/150% arial;} </style> <script type="text/javascript"> function a() { var scrollTop; var scrollLeft; if (typeof window.pageYOffset != 'undefined') { scrollTop = window.pageYOffset; scrollLeft = window.pageXOffset; } else if (typeof document.compatMode != 'undefined' && document.compatMode != 'BackCompat') { scrollTop = document.documentElement.scrollTop; scrollLeft = document.documentElement.scrollLeft; } else if (typeof document.body != 'undefined') { scrollTop = document.body.scrollTop; scrollLeft = document.body.scrollLeft; } var scrollHeight = document.documentElement.scrollHeight; var scrollWidth = document.documentElement.scrollWidth; var clientWidth = document.documentElement.clientWidth; var clientHeight = document.documentElement.clientHeight; var offsetWidth = document.documentElement.offsetWidth; var offsetHeight = document.documentElement.offsetHeight; var screenTop = window.screenTop; var screenBottom = window.screenBottom; var screenLeft = window.screenLeft; var sheight = window.screen.height; var swidth = window.screen.width; var availHeight = window.screen.availHeight; var availWidth = window.screen.availWidth; document.getElementById('scrollTop').value = scrollTop; document.getElementById('scrollLeft').value = scrollLeft; document.getElementById('scrollHeight').value = scrollHeight; document.getElementById('scrollWidth').value = scrollWidth; document.getElementById('clientWidth').value = clientWidth; document.getElementById('clientHeight').value = clientHeight; document.getElementById('offsetWidth').value = offsetWidth; document.getElementById('offsetHeight').value = offsetHeight; document.getElementById('screenTop').value = screenTop; document.getElementById('screenBottom').value = screenBottom; document.getElementById('screenLeft').value = screenLeft; document.getElementById('sheight').value = sheight; document.getElementById('swidth').value = swidth; document.getElementById('availHeight').value = availHeight; document.getElementById('availWidth').value = availWidth; } </script> </head> <body> <div style="width:420px;height:470px;margin:0 auto;font-size:12px; border:solid 5px #ccc;"> <center> <table width="400" border="0" cellspacing="0" cellpadding="0" style="font-size:12px;margin-top:20px;"> <tr> <td width="187" align="right">scrollTop(滚动条卷过的高):</td> <td width="10"> </td> <td width="209"><input type="text" name="scrollTop" id="scrollTop" /></td> </tr> <tr> <td align="right">scrollLeft(滚动条卷过的宽):</td> <td> </td> <td><input type="text" name="scrollLeft" id="scrollLeft" /></td> </tr> <tr> <td align="right">scrollHeight(内容实际高度):</td> <td> </td> <td><input type="text" name="scrollHeight" id="scrollHeight" /></td> </tr> <tr> <td align="right">scrollWidth(内容实际宽度):</td> <td> </td> <td><input type="text" name="scrollWidth" id="scrollWidth" /></td> </tr> <tr> <td align="right">clientWidth(可见区域宽):</td> <td> </td> <td><input type="text" name="clientWidth" id="clientWidth" /></td> </tr> <tr> <td align="right">clientHeight(可见区域高):</td> <td> </td> <td><input type="text" name="clientHeight" id="clientHeight" /></td> </tr> <tr> <td align="right">offsetWidth(加滚动条宽?):</td> <td> </td> <td><input type="text" name="offsetWidth" id="offsetWidth" /></td> </tr> <tr> <td align="right">offsetHeight(加滚动条高?):</td> <td> </td> <td><input type="text" name="offsetHeight" id="offsetHeight" /></td> </tr> <tr> <td align="right">screenTop:</td> <td> </td> <td><input type="text" name="screenTop" id="screenTop" /></td> </tr> <tr> <td align="right">screenBottom:</td> <td> </td> <td><input type="text" name="screenBottom" id="screenBottom" /></td> </tr> <tr> <td align="right">screenLeft:</td> <td> </td> <td><input type="text" name="screenLeft" id="screenLeft" /></td> </tr> <tr> <td align="right">sheight(分辨率高):</td> <td> </td> <td><input type="text" name="sheight" id="sheight" /></td> </tr> <tr> <td align="right">swidth(分分辨率宽):</td> <td> </td> <td><input type="text" name="swidth" id="swidth" /></td> </tr> <tr> <td align="right">availHeight:</td> <td> </td> <td><input type="text" name="availHeight" id="availHeight" /></td> </tr> <tr> <td align="right">availWidth:</td> <td> </td> <td><input type="text" name="availWidth" id="availWidth" /></td> </tr> </table> <a href="javascript:a()" style="height:20px;display:block;">内容高度是400PX,点击查看所有属性值</a> </center> </div> </body> </html>
其实,我们可以用document.documentElement代替document.body来获取我们想要的结果 将代码中的document.body替换为document.documentElement,再来看看各浏览器下的实际结果:
ii测试结果表明,IE系列浏览器对document.documentElement属性的解释是正确的,其它标准浏览器将offsetHeight解释成 了scrollHeight。火狐和netscape更是把这两个属性调换了过来。不过总的来说各属性都可以有个相应的解释,不会像 document.body一样只有可怜的两种解释。
终于可以放心地使用JS方法获取各种页面高宽属性了吧^_^!
用document.documentElement取代document.body的原因分析
声明:登载此文出于传递更多信息之目的,并不意味着赞同其观点或证实其描述。
Reply on: @reply_date@
@reply_contents@