用document.documentElement取代document.body的原因分析

我不是女神ヾ 2022-06-01 02:07 170阅读 0赞

# 用document.documentElement取代document.body的原因分析 #

转载  2012年02月19日 22:22:41

*  标签：
 *  [xhtml][] /
 *  [javascript][] /
 *  [border][] /
 *  [html][] /
 *  [function][] /
 *  [input][]

*  282

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

在设计页面时可能经常会用到固定层的位置，这就需要获取一些html对象的坐标以更灵活的设置目标层的坐标，这里可能就会用到document.body.scrollTop等属性，但是此属性在xhtml标准网页或者更简单的说是带<!DOCTYPE ..>标签的页面里得到的结果是0，如果不要此标签则一切正常，那么在xhtml页面怎么获得body的坐标呢，当然有办法-使用document.documentElement来取代document.body,可以这样写  
例：  
var top = document.documentElement.scrollTop || document.body.scrollTop;  
在javascript里||是个好东西，除了能用在if等条件判断里，还能用在变量赋值上。那么上例等同于下例。  
例：  
var top = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop;  
这么写可以得到很好的兼容性。

相反，如果不做声明的话，document.documentElement.scrollTop反而会显示为0。

\[html\]  [view plain][]  [copy][view plain]

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="width: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>

[xhtml]: http://so.csdn.net/so/search/s.do?q=xhtml&t=blog
[javascript]: http://so.csdn.net/so/search/s.do?q=javascript&t=blog
[border]: http://so.csdn.net/so/search/s.do?q=border&t=blog
[html]: http://so.csdn.net/so/search/s.do?q=html&t=blog
[function]: http://so.csdn.net/so/search/s.do?q=function&t=blog
[input]: http://so.csdn.net/so/search/s.do?q=input&t=blog
[view plain]: http://blog.csdn.net/xbbccx/article/details/7273382#