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

最新推荐文章于 2021-08-11 17:43:57 发布
最新推荐文章于 2021-08-11 17:43:57 发布
阅读量1.5k 收藏
点赞数
分类专栏： HTML javascript

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

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

建议用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
  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>   
javaPie
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
document.documentElement && document.documentElement.scrollTop
10-30
在JavaScript中，`document.documentElement` 和 `document.documentElement.scrollTop` 是两个非常重要的属性，它们与网页文档的DOM（Document Object Model）交互，特别是涉及到页面滚动时的行为。本文将深入讲解...
document.documentElement和document.body区别介绍
09-05
body是DOM对象里的body子节点，即body标签，documentElement 是整个节点树的根节点root，详细介绍请看本文，感兴趣的朋友可以参考下
document.documentElement和document.body的区别
热门推荐
菜鸟史
04-15 1万+
网页中获取滚动条卷去部分的高度，可以通过 document.body.scrollTop 来获取，比如使div跟着滚动条滚动： window.onscroll = function () { var div = document.getElementById("div"); div.style.top = document.body.scrollTop + "px"
document.documentElement和document.body区别
我的博客
09-06 1502
区别： body是DOM对象里的body子节点，即 标签； documentElement 是整个节点树的根节点root，即 标签； 没使用DTD情况即怪异模式BackCompat下： document.documentElement.clientHeight=0 document.body.clientHeight=618 使用DTD情况即标准模式CSS
document.documentElement 和 document.body
weixin_33744854的博客
01-08 140
document.documentElement 对&lt;html /&gt;元素的引用 document.documentElement === document.getElementsByTagName('html')[0] document.body 对&lt;body /&gt;元素的引用 document.body === document.getElementsByTa...
由document.body和document.documentElement想到的
09-06
在Web开发中，理解和掌握`document.body`和`document.documentElement`的区别至关重要，尤其是在处理页面布局和兼容性问题时。这两个对象分别代表了HTML文档的不同部分：`document.body`指的是HTML文档的实际内容...
document.documentElement与document.body
莹儿的博客
01-14 196
两种特殊的文档属性可用来访问根节点： document.documentElement document.body 第一个属性可返回存在于 XML 以及 HTML 文档中的文档根节点。 第二个属性是对 HTML 页面的特殊扩展，提供了对 标签的直接访问。 【文档类型已申明】 IE document.documentElement.scrollHeight 浏览器所有内容高度 document....
document.body 与 document.documentElement区别
weixin_45172119的博客
08-11 601
document.body 与 document.documentElement区别 （1）什么是document.body？ 返回html dom中的body节点 即<body> （2）什么是 document.documentElement？ 返回html dom中的root 节点 即<html> （3）document.documentElement 与 document.body的应用场景 获取 scrollTop 方面的差异 ①在chrome(版本
document.body 和 document.documentElement 的区别
Mark的专栏
09-10 8860
在设计页面时可能经常会用到固定层的位置，这就需要获取一些html对象的坐标以更灵活的设置目标层的坐标，这里可能就会用到document.body.scrollTop等属性，但是此属性在xhtml标准网页或者更简单的说是带标签的页面里得到的结果是0，如果不要此标签则一切正常，那么在xhtml页面怎么获得body的坐标呢，当然有办法-使用document.documentElement来取代d
document.body和document.documentElement的比较
congcongsuiyue的专栏
11-27 654
ocument.body是DOM中Document对象里的body节点， document.documentElement是文档对象根节点(html)的引用。      IE在怪异模型（quick mode）下document.documentElement无法正确取到clietHeight scrollHeight等值，比如clietHeight=0。可以见IE的怪异模型并没有把htm
【转】document.documentElement和document.body的区别
lalala762的博客
09-14 102
网页中获取滚动条卷去部分的高度，可以通过 document.body.scrollTop 来获取，比如使div跟着滚动条滚动： window.onscroll = function () { var div = document.getElementById("div"); div.style.top = document.body.scrollTop + "px"; } 运行后没有达到预期效果，输出 document.body.scrollTop 的值一看，一直都是 0。一翻折腾，原来是
转 document.documentElement与document.body
任香980101
04-04 107
原来HTML里是document.body XHTML里是document.documentElement 都指的是&lt;body&gt;节点(OR元素) 可以这样兼容： function getBodyObj() { return (document.documentElement) ? document.documentElement : document.body ; ...
documentElement
韦奕-web前端开发
08-14 1344
今天看js权威指南时看到书上有句代码：document.documentElement.children,一下就懵了： document和documentElement不一样么？但，如果document和documentElement同指的是document，那不对啊，children属性是只有Element对象也有的，document对象上如何能调用？？难道documentElement是Doc
document.documentElement 属性
m0_57835615的博客
05-29 946
document.documentElement 属性返回文档中的html元素。 var html = document.documentElement; console.log(html);
document，document.documentElement区别
最新发布
05-23
通过`document.documentElement`可以访问到根元素的各种属性和方法，比如`document.documentElement.style`可以获取或设置根元素的样式。 需要注意的是，在一些浏览器中，`document.documentElement`可能指向`...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值