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
下面的是从网上找到的一点信息,希望对以后有点用处:
在设计页面时可能经常会用到固定层的位置,这就需要获取一些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对象了。
本文转于:http://blog.sina.com.cn/s/blog_68bb0bad0100s58f.html
分享到:
相关推荐
`document.body` 属性提供了一个直接与<body>元素交互的方式,使得我们可以访问或修改页面上的内容、样式甚至事件处理。 `document.body.scrollTop` 是 `document.body` 对象的一个属性,它用于获取或设置浏览器...
首先,我们需要理解`document.body.scrollTop`和`document.documentElement.scrollTop`这两个属性的作用。它们分别表示文档体和整个文档元素的垂直滚动距离。在理想情况下,这两个属性应该返回相同的值,即页面当前...
`document.body.scrollTop` 是一个用于获取或设置浏览器中页面垂直滚动距离的属性。这个属性在前端开发中非常实用,尤其是在处理页面滚动效果、动态布局调整等方面。通过了解并掌握 `document.body.scrollTop` 的...
本文详细介绍了document.head与document.body属性的使用方法和应用场景,希望能够帮助你在实际开发中更好地处理文档结构的操作。如果你在实际开发中遇到任何问题,可以参考本文的内容,或者查阅相关的文档和社区讨论...
在JavaScript的DOM操作中,document.documentElement 和 document.body 是两个非常重要的属性,它们分别代表了文档的不同部分。理解这两者之间的区别对于前端开发者来说至关重要,尤其是在进行页面布局和滚动操作时...
这两种模式会影响到document.documentElement和document.body的clientHeight等属性值。 在没有使用DTD声明(文档类型定义)的情况下,浏览器会进入怪异模式。在这个模式下,document.documentElement的clientHeight...
document.documentElement代表的是标签,因此在使用scrollTop属性时,应该使用document.documentElement.scrollTop来获取滚动条的垂直位置。 相对地,如果页面中没有DOCTYPE声明,那么浏览器通常会进入怪异模式...
document.body 属性 1. document.body.bgColor:设置或获取对象后面的背景颜色。 2. document.body.link:未点击过的链接颜色。 3. document.body.alink:激活链接(焦点在此链接上)的颜色。 4. document.body....
上次的测试说明了document.body属性并不会给我们返回预期的结果,比如我们用document.body.clientHeight原本想取得“页面可见区域高度”,可实际上返回的是“页面实际内容高度”。 那我们怎么办呢?难道加上了文档...
在JavaScript中,`document.body.scrollTop` 是一个常用于获取网页滚动条顶部到页面内容顶部的距离的属性。然而,有时候你会发现这个属性的值始终为零,即使页面已经进行了滚动。这通常与文档类型声明(DOCTYPE)...
document.body.[属性名] ``` - **示例**: ```javascript // 获取body的背景颜色 var bgColor = document.body.bgColor; // 设置body的文字颜色 document.body.text = "#FF00FF"; // 粉色 ``` ##### 7. `...
`document.body`代表HTML文档的主体部分,提供了以下属性和方法: 1. `document.body.bgColor`: 设置或获取body的背景颜色。 2. `document.body.link`: 未被点击的链接颜色。 3. `document.body.alink`: 激活的链接...
1. **`document.body.clientWidth`** 和 **`document.body.clientHeight`**: - 这两个属性分别用于获取可视区域的宽度和高度,不包括滚动条和边框。 2. **`document.body.offsetWidth`** 和 **`document.body....
然而,在实际应用过程中发现,`document.frames`这一属性在Internet Explorer(IE)浏览器中可以正常工作,但在其他非IE浏览器如Chrome、Firefox等中却无法正常使用。这主要是因为`document.frames`是IE特有的非标准...
- `document.body`: 表示HTML文档的`<body>`元素,提供了一些与页面主体相关的属性和方法。 - `document.body.bgColor`, `document.body.link`, `document.body.alink`, `document.body.vlink`: 分别设置背景颜色...
- **IE’s document.all collection exposes all document elements**:Internet Explorer 通过 `document.all` 属性暴露了文档中的所有元素。 - **This array provides access to every element in the document**...
在JavaScript中,`document.all`属性是Internet Explorer的专有特性,它允许脚本访问文档中的所有元素。这个属性返回一个对象集合,包含了文档中所有的HTML标签,这为开发者提供了强大的DOM操作能力。 ### `...
8. **`document.body.topMargin`**、**`document.body.leftMargin`**、**`document.body.rightMargin`**、**`document.body.bottomMargin`**:分别设置页面上、左、右、下的边距。 ```javascript document.body....
在Web开发中,理解和掌握`document.body`和`document.documentElement`的区别至关重要,尤其是在处理页面布局和兼容性问题时。这两个对象分别代表了HTML文档的不同部分:`document.body`指的是HTML文档的实际内容...
在本文中,我们将探讨`document.body.scrollTop`在某些情况下值为0的问题以及解决方案。 问题的核心在于`document.body.scrollTop`在具有DTD(Document Type Definition)的页面上可能不会如预期般工作。DTD 是一种...