• 转 document.documentElement与document.body

    原来HTML里是document.body
    XHTML里是document.documentElement
    都指的是<body>节点(OR元素)


    可以这样兼容：

    function getBodyObj()
    {
    return (document.documentElement) ? document.documentElement : document.body ;
    }

    在DHTML文档中对documentElement的说明是：Object that receives the reference to the document element，The root node of a typical HTML document is the html object.

    body

    Microsoft® Internet Explorer 6 的新增内容

    当你使用 !DOCTYPE 声明指定标准兼容模式的时候，此对象将不再代表文档内容所渲染的整个表面。该对象当然可从其内容中获得其大小，但你也可以像 div 对象那样精确设置其大小。

    也就是说在HTML4.0标准下用document.body，在XHTML标准下就要换成document.documentElement。XHTML下document.body仅仅表示body对象，而不能代表文档内容所渲染的整个表面。HTML下document.body.clientHeight表示浏览器的可视高度，XHTML下则是document.documentElement.clientHeight。document.body.clientHeight在XHTML下仅表示body的可视高度。在HTML4.0下用document.body.scrollTop；而在XHTML下则是document.documentElement.scrollTop,之前的document.body.scrollTop是恒为0的。

    ===================================================================

    IE6在页面内容超出窗口大小时将宽度属性scrollWidth、clientWidth、offsetWidth都解释为内容实际宽度。
    上次的测试说明了document.body属性并不会给我们返回预期的结果，比如我们用document.body.clientHeight原本想取得“页面可见区域高度”，可实际上返回的是“页面实际内容高度”。
    那我们怎么办呢？难道加上了文档DTD类型之后就再也不能取到“可见区域高度”和“内容实际宽度”等等属性了吗？

    Java代码 复制代码
    1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">    
    2. <html xmlns="http://www.w3.org/1999/xhtml">    
    3. <head runat="server">    
    4. <title>documentElement</title>    
    5. <style type="text/css">    
    6. body{margin:0;padding:0;font:12px/150% arial;}    
    7. </style>    
    8. <script type="text/javascript">    
    9. function a() {    
    10. var scrollTop;    
    11. var scrollLeft;    
    12. if (typeof window.pageYOffset != 'undefined') {    
    13. scrollTop = window.pageYOffset;    
    14. scrollLeft = window.pageXOffset;    
    15. }    
    16. else if (typeof document.compatMode != 'undefined' && document.compatMode != 'BackCompat') {    
    17. scrollTop = document.documentElement.scrollTop;    
    18. scrollLeft = document.documentElement.scrollLeft;    
    19. }    
    20. else if (typeof document.body != 'undefined') {    
    21. scrollTop = document.body.scrollTop;    
    22. scrollLeft = document.body.scrollLeft;    
    23. }    
    24. var scrollHeight = document.documentElement.scrollHeight;    
    25. var scrollWidth = document.documentElement.scrollWidth;    
    26. var clientWidth = document.documentElement.clientWidth;    
    27. var clientHeight = document.documentElement.clientHeight;    
    28. var offsetWidth = document.documentElement.offsetWidth;    
    29. var offsetHeight = document.documentElement.offsetHeight;    
    30. var screenTop = window.screenTop;    
    31. var screenBottom = window.screenBottom;    
    32. var screenLeft = window.screenLeft;    
    33. var sheight = window.screen.height;    
    34. var swidth = window.screen.width;    
    35. var availHeight = window.screen.availHeight;    
    36. var availWidth = window.screen.availWidth;    
    37. document.getElementById('scrollTop').value = scrollTop;    
    38. document.getElementById('scrollLeft').value = scrollLeft;    
    39. document.getElementById('scrollHeight').value = scrollHeight;    
    40. document.getElementById('scrollWidth').value = scrollWidth;    
    41. document.getElementById('clientWidth').value = clientWidth;    
    42. document.getElementById('clientHeight').value = clientHeight;    
    43. document.getElementById('offsetWidth').value = offsetWidth;    
    44. document.getElementById('offsetHeight').value = offsetHeight;    
    45. document.getElementById('screenTop').value = screenTop;    
    46. document.getElementById('screenBottom').value = screenBottom;    
    47. document.getElementById('screenLeft').value = screenLeft;    
    48. document.getElementById('sheight').value = sheight;    
    49. document.getElementById('swidth').value = swidth;    
    50. document.getElementById('availHeight').value = availHeight;    
    51. document.getElementById('availWidth').value = availWidth;    
    52. }    
    53. </script>    
    54. </head>    
    55. <body>    
    56. <div style="420px;height:470px;margin:0 auto;font-size:12px; border:solid 5px #ccc;">    
    57. <center>    
    58. <table width="400" border="0" cellspacing="0" cellpadding="0" style="font-size:12px;margin-top:20px;">    
    59. <tr>    
    60. <td width="187" align="right">scrollTop（滚动条卷过的高）：</td>    
    61. <td width="10"> </td>    
    62. <td width="209"><input type="text" name="scrollTop" id="scrollTop" /></td>    
    63. </tr>    
    64. <tr>    
    65. <td align="right">scrollLeft（滚动条卷过的宽）：</td>    
    66. <td> </td>    
    67. <td><input type="text" name="scrollLeft" id="scrollLeft" /></td>    
    68. </tr>    
    69. <tr>    
    70. <td align="right">scrollHeight（内容实际高度）：</td>    
    71. <td> </td>    
    72. <td><input type="text" name="scrollHeight" id="scrollHeight" /></td>    
    73. </tr>    
    74. <tr>    
    75. <td align="right">scrollWidth（内容实际宽度）：</td>    
    76. <td> </td>    
    77. <td><input type="text" name="scrollWidth" id="scrollWidth" /></td>    
    78. </tr>    
    79. <tr>    
    80. <td align="right">clientWidth（可见区域宽）：</td>    
    81. <td> </td>    
    82. <td><input type="text" name="clientWidth" id="clientWidth" /></td>    
    83. </tr>    
    84. <tr>    
    85. <td align="right">clientHeight（可见区域高）：</td>    
    86. <td> </td>    
    87. <td><input type="text" name="clientHeight" id="clientHeight" /></td>    
    88. </tr>    
    89. <tr>    
    90. <td align="right">offsetWidth（加滚动条宽？）：</td>    
    91. <td> </td>    
    92. <td><input type="text" name="offsetWidth" id="offsetWidth" /></td>    
    93. </tr>    
    94. <tr>    
    95. <td align="right">offsetHeight（加滚动条高？）：</td>    
    96. <td> </td>    
    97. <td><input type="text" name="offsetHeight" id="offsetHeight" /></td>    
    98. </tr>    
    99. <tr>    
    100. <td align="right">screenTop：</td>    
    101. <td> </td>    
    102. <td><input type="text" name="screenTop" id="screenTop" /></td>    
    103. </tr>    
    104. <tr>    
    105. <td align="right">screenBottom：</td>    
    106. <td> </td>    
    107. <td><input type="text" name="screenBottom" id="screenBottom" /></td>    
    108. </tr>    
    109. <tr>    
    110. <td align="right">screenLeft：</td>    
    111. <td> </td>    
    112. <td><input type="text" name="screenLeft" id="screenLeft" /></td>    
    113. </tr>    
    114. <tr>    
    115. <td align="right">sheight（分辨率高）：</td>    
    116. <td> </td>    
    117. <td><input type="text" name="sheight" id="sheight" /></td>    
    118. </tr>    
    119. <tr>    
    120. <td align="right">swidth（分分辨率宽）：</td>    
    121. <td> </td>    
    122. <td><input type="text" name="swidth" id="swidth" /></td>    
    123. </tr>    
    124. <tr>    
    125. <td align="right">availHeight：</td>    
    126. <td> </td>    
    127. <td><input type="text" name="availHeight" id="availHeight" /></td>    
    128. </tr>    
    129. <tr>    
    130. <td align="right">availWidth：</td>    
    131. <td> </td>    
    132. <td><input type="text" name="availWidth" id="availWidth" /></td>    
    133. </tr>    
    134. </table>    
    135. <a href="javascript:a()" style="height:20px;display:block;">内容高度是400PX，点击查看所有属性值</a>    
    136. </center>    
    137. </div>    
    138. </body>    
    139. </html>   
    <!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="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方法获取各种页面高宽属性了吧^_^!
  • 相关阅读:
    DP2_第K优解
    DP1
    算法第一讲_动态规划
    CodeForces 487A Fight the Monster
    HDU 2899 Strange fuction
    lower_bound() 与 upper_bound()
    jQuery qrcode生成二维码
    本地代码上传至git仓库
    图片懒加载
    react-native学习（一）————使用react-native-tab-navigator创建底部导航
  • 原文地址：https://www.cnblogs.com/iclotus/p/1727545.html
Copyright © 2020-2023  润新知