W3C document.body document.documentElement-优快云博客

本文探讨了JavaScript中根据文档模式获取元素高度的方法，并详细解释了如何根据文档兼容模式（Standards Mode或Quirks Mode）正确选择document.documentElement或document.body。此外，还介绍了在不同模式下获取HTML对象坐标的技巧。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

转载：http://www.seobye.com/div-css/87 http://www.seobye.com/div-css/90
下面的内容没有完整转载，如果要查看完整内容请去原网站。

1、若网页中含有< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >这一行代码，则应该使用document.documentElement

2、若网页中只有而没有上面的一行代码，则JS脚本应该使用document.body

对于document.compatMode，很多朋友可能都根我一样很少接触，知道他的存在却不清楚他的用途。其实这个对于我们开发兼容性的web页面还是很有帮助，我们都知道，盒模型的渲染在 Standards Mode和Quirks Mode是有很大差别的，在不声明Doctype的情况下，浏览器默认是Quirks Mode。所以为兼容性考虑，我们可能需要获取当前的文档渲染方式。
document.compatMode正好派上用场，它有两种可能的返回值：BackCompat和CSS1Compat，对其解释如下：

BackCompat Standards-compliant mode is not switched on. (Quirks Mode)
CSS1Compat Standards-compliant mode is switched on. (Standards Mode)
当文档有了标准声明时， document.compatMode 的值就等于 “CSS1compat”，因此，我们可以根据 document.compatMode 的值来判断文档是否加了标准声明
var height = document.compatMode==”CSS1Compat” ? document.documentElement.clientHeight : document.body.clientHeight;
当文档有了标准声明时火狐的style.top等等的设置必须加上“px”等单位，否则它不会认。既然已经说道了这，再展开一下。对于火狐：
一、offsetTop 返回的是数字，而 style.top 返回的是字符串，除了数字外还带有单位：px。
二、offsetTop 只读，而 style.top 可读写。
三、如果没有给 HTML 元素指定过 top 样式（即使在css中设定也不行），则 style.top 返回的是空字符串。
offsetLeft 与 style.left、offsetWidth 与 style.width、offsetHeight 与 style.height 也是同样道理。

在设计页面时可能经常会用到固定层的位置，这就需要获取一些html对象的坐标以更灵活的设置目标层的坐标，这里可能就会用到 document.body.scrollTop等属性，但是此属性在xhtml标准网页或者更简单的说是带< !DOCTYPE..>标签的页面里得到的结果是0，如果不要此标签则一切正常，那么在xhtml页面怎么获得body的坐标呢，当然有办法-使用 document.documentElement来取代document.body,可以这样写
例：
var top = document.documentElement.scrollTop || document.body.scrollTop;