js中document.documentElement 和document.body 以及其属性(转)
原地址：http://www.cnblogs.com/clouds008/archive/2012/05/11/2496668.html
（原来HTML里是document.body --XHTML里是document.documentElement ,都指的是<body>节点(OR元素)
）
在设计页面时可能经常会用到固定层的位置，这就需要获取一些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。
得到各个属性如下：
网页可见区域宽： document .body.clientWidth;
网页可见区域高： document .body.clientHeight;
网页可见区域宽： document .body.offsetWidth (包括边线的宽);
网页可见区域高： document .body.offsetHeight (包括边线的宽);
网页正文全文宽： document .body.scrollWidth;
网页正文全文高： document .body.scrollHeight;
网页被卷去的高： document .body.scrollTop;
网页被卷去的左： document .body.scrollLeft;
网页正文部分上： window.screenTop;
网页正文部分左： window.screenLeft;
屏幕分辨率的高： window.screen.height;
屏幕分辨率的宽： window.screen.width;
屏幕可用工作区高度： window.screen.availHeight;
屏幕可用工作区宽度：window.screen.availWidth;
scrollHeight: 获取对象的滚动高度。
scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离
scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离
scrollWidth:获取对象的滚动宽度
offsetHeight:获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度
offsetLeft:获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置
offsetTop:获取对象相对于版面或由 offsetTop 属性指定的父坐标的计算顶端位置
event.clientX 相对文档的水平座标
event.clientY 相对文档的垂直座标
event.offsetX 相对容器的水平坐标
event.offsetY 相对容器的垂直坐标
document .documentElement.scrollTop 垂直方向滚动的值
event.clientX+document .documentElement.scrollTop 相对文档的水平座标+垂直方向滚动的量
Post by molong on 2009-05-19 11:57 PM #1
要获取当前页面的滚动条纵坐标位置，用：
document .documentElement.scrollTop;
而不是：
document .body.scrollTop;
documentElement 对应的是 html 标签，而 body 对应的是 body 标签。
在标准w3c下，document .body.scrollTop恒为0，需要用document .documentElement.scrollTop来代替;
如果你想定位鼠标相对于页面的绝对位置时，你会发现google里面1000篇文章里面有999.99篇会让你使用event.clientX+document .body.scrollLeft，event.clientY+document .body.scrollTop，如果你发现你的鼠标定位偏离了你的想象，请不要奇怪，这是再正常不过的事情。
ie5.5之后已经不支持document .body.scrollX对象了。
所以在编程的时候，请加上这样的判断
if (document.body && document.body.scrollTop && document.body.scrollLeft)
{
top=document .body.scrollTop;
left=document .body.scrollleft;
}
if (document.documentElement && document.documentElement.scrollTop && document.documentElement.scrollLeft)
{
top=document.documentElement.scrollTop;
left=document.documentElement.scrollLeft;
}
分享到：
相关推荐
在探讨“火狐、谷歌、IE关于`document.body.scrollTop`和`document.documentElement.scrollTop`以及值为0的问题”这一主题时，我们深入分析了浏览器在处理页面滚动位置时的不同行为，尤其是当滚动位置值始终为0时的...
在JavaScript的DOM操作中，document.documentElement 和 document.body 是两个非常重要的属性，它们分别代表了文档的不同部分。理解这两者之间的区别对于前端开发者来说至关重要，尤其是在进行页面布局和滚动操作时...
5. **浏览器兼容性**：虽然大部分现代浏览器都支持 `document.body.scrollTop`，但在一些老版本的IE浏览器中可能需要使用 `document.documentElement.scrollTop` 来兼容。 6. **CSS替代方案**：有时候，为了避免...
在HTML文档对象模型（DOM）中，document.documentElement和document.body是两个重要的属性，它们各自代表了不同的节点。理解这两者的区别对于前端开发者来说是非常重要的。 首先，document.documentElement代表了...
在JavaScript中，`document.documentElement` 和 `document.documentElement.scrollTop` 是两个非常重要的属性，它们与网页文档的DOM（Document Object Model）交互，特别是涉及到页面滚动时的行为。本文将深入讲解...
`document.body.scrollTop` 是一个用于获取或设置浏览器中页面垂直滚动距离的属性。这个属性在前端开发中非常实用，尤其是在处理页面滚动效果、动态布局调整等方面。通过了解并掌握 `document.body.scrollTop` 的...
javascript:s=document.documentElement.outerHTML;document.write('<body></body>');document.body.innerText=s; ``` 1. **第一步**：`javascript:` 是告诉浏览器这是一个JavaScript脚本，可以直接执行。 2. **第...
Vue中document.body.scrollTop的值总为零的解决办法 最近在做vue的时候监听页面滚动发现document.body.scrollTop一直为0 但是发现document.body.scrollTop一直是0。 查资料发现是DTD的问题。 页面指定了DTD，即指定...
总之，`document.documentElement`是JavaScript中一个强大的工具，它让我们能够方便地访问和操作HTML文档的根元素，从而实现各种功能，包括但不限于元素遍历、属性获取、事件绑定、样式修改以及DOM操作。理解和熟练...
if (document.documentElement && document.documentElement.scrollTop) diffY = document.documentElement.scrollTop; else if (document.body) diffY = document.body.scrollTop else {/*Netscape ...
这个函数通过检查 `document.documentElement.scrollTop` 和 `document.body.scrollTop` 来确定滚动条的位置。在不同的浏览器中，这两个属性可能有不同的行为，因此需要进行条件判断来确保兼容性。 ```javascript ...
- 在 Firefox 和 Opera 中，`document.documentElement.clientWidth`和`document.documentElement.clientHeight`分别表示页面宽度减去`BODY`的外边距（`margin`）后的宽度和高度。 为了确保代码的兼容性，开发者在...
在JavaScript中，`document.body` 和 `document.documentElement` 是两个经常用来获取页面信息的对象，但它们之间存在一些重要的差异，尤其是在处理不同浏览器的兼容性问题时。`document.documentElement` 通常被...
在JavaScript中，`document.body.scrollTop` 是一个常用于获取网页滚动条顶部到页面内容顶部的距离的属性。然而，有时候你会发现这个属性的值始终为零，即使页面已经进行了滚动。这通常与文档类型声明（DOCTYPE）...
在Web开发中，理解和掌握`document.body`和`document.documentElement`的区别至关重要，尤其是在处理页面布局和兼容性问题时。这两个对象分别代表了HTML文档的不同部分：`document.body`指的是HTML文档的实际内容...
对于IE5.5及更高版本，需要特别处理`document.body.scrollLeft`和`document.documentElement.scrollLeft`，以及`document.body.scrollTop`和`document.documentElement.scrollTop`，以确保在所有浏览器中的兼容性： ...
在JavaScript中，获取浏览器的高度和宽度是常见的需求，用于适应不同的屏幕尺寸和实现响应式设计。然而，由于不同浏览器之间的差异，获取这些值的方法并不统一。本文将详细介绍如何在多种浏览器环境下，包括IE、Fire...
- 在IE中，`document.documentElement.clientWidth`和`document.documentElement.clientHeight`可能返回0，这是因为IE默认不遵循W3C标准。 - Firefox和Opera遵循W3C标准，它们的`document.documentElement....