event的x,clientX,offsetX,screenX
·
x:设置或者是得到鼠标相对于目标事件的父元素的外边界在x坐标上的位置。
·
clientX:相对于客户区域的x坐标位置,不包括滚动条,就是正文区域。
·
offsetx:设置或者是得到鼠标相对于目标事件的父元素的内边界在x坐标上的位置。
·
screenX:相对于用户屏幕。
·
z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面
document.body.clientWidth ==> BODY对象宽度
document.body.clientHeight ==> BODY对象高度
document.documentElement.clientWidth ==> 可见区域宽度
document.documentElement.clientHeight ==> 可见区域高度
当页面上有DOCTYPE的时候,值为
document.body.clientHeight = 54px
document.documentElement.clientHeight = 729px
当没有DOCTYPE时
document.body.clientHeight = 729px
document.documentElement.clientHeight = 0px
可以看出,document.body.clientHeight
和
document.documentElement.clientHeight 的区别。
就是因为少了DOCTYPE
所以
document.documentElement.clientHeight 的值为0。而换成 document.body.clientHeight就好了
http://hi.baidu.com/ettazz/blog/item/f44685882c4fcbd8fc1f1078.html
分享到:
相关推荐
- **document.body.clientWidth**: 表示网页可见区域的宽度(不包含滚动条)。 - **document.body.clientHeight**: 表示网页可见区域的高度(不包含滚动条)。 - **document.body.offsetWidth**: 包含边框在内的网页...
- `document.body.clientWidth` 和 `document.body.clientHeight` 同样返回BODY对象的宽度和高度。 - `document.documentElement.clientWidth` 和 `document.documentElement.clientHeight` 返回的是包含边距的页面...
- `document.body.clientWidth` 和 `document.body.clientHeight` 分别代表BODY对象的宽度和高度。 - `document.documentElement.clientWidth` 和 `document.documentElement.clientHeight` 表示可见区域的宽度和...
3. **`document.body.clientWidth` 和 `document.body.clientHeight`**: - 返回文档主体元素的可视区域宽度和高度。 - 当前页面没有滚动条时,返回的是实际内容的宽度和高度;如果页面有滚动条,则返回的值比实际...
当需要定位鼠标相对于页面的绝对位置时,通常会使用`event.clientX + document.body.scrollLeft`和`event.clientY + document.body.scrollTop`。但需要注意的是,对于IE5.5及更高版本,需要特别处理`document.body....
在本文中,我们将深入探讨一些关于JS中`document.documentElement`、`document.body`及其相关属性的知识点,以及如何处理不同情况下的滚动和尺寸获取。 在HTML文档中,`document.body`通常指的是HTML中的<body>元素...
var w = document.documentElement.clientWidth || document.body.clientWidth; var h = document.documentElement.clientHeight || document.body.clientHeight; ``` 2. **`offsetHeight` 和 `offsetWidth`** ...
- **`document.body.clientWidth`**: 返回 BODY 元素的可见宽度(不包括滚动条和边框)。 - **`document.body.clientHeight`**: 返回 BODY 元素的可见高度(不包括滚动条和边框)。 这些属性可以用于任何元素,但...
- IE使用document.body.offsetWidth和document.body.offsetHeight,FF使用window.innerWidth、window.innerHeight以及document.documentElement.clientWidth和document.documentElement.clientHeight。 - 通用做法...
在Web开发中,理解和掌握`document.body`和`document.documentElement`的区别至关重要,尤其是在处理页面布局和兼容性问题时。这两个对象分别代表了HTML文档的不同部分:`document.body`指的是HTML文档的实际内容...
- `document.body.clientWidth` 和 `document.body.clientHeight` 分别返回浏览器窗口可见区域的宽度和高度,不包括滚动条。 - `document.body.offsetWidth` 和 `document.body.offsetHeight` 包括了边框,提供了...
在 IE 中,可以使用 `document.body` 和 `document.documentElement` 两个对象来获取浏览器的高度和宽度值。 * `document.body.clientWidth`: 获取 BODY 对象的宽度。 * `document.body.clientHeight`: 获取 BODY ...
为了确保代码的跨浏览器兼容性,开发者通常需要进行适当的检测和适配,使用`window.innerWidth`和`window.innerHeight`作为更通用的解决方案,同时考虑到`document.documentElement`和`document.body`在某些情况下的...
对于窗体的高度和宽度,IE使用`document.body.offsetWidth`和`document.body.offsetHeight`,但FF提供了`window.innerWidth`和`window.innerHeight`,以及`document.documentElement.clientWidth`和`document....
通用方法是使用`document.body.clientWidth`和`document.body.clientHeight`。 3. **事件绑定** - **添加事件监听器**:IE使用`element.attachEvent("onclick", function);`,FF使用`element.addEventListener(...
var mouseX = event.clientX + document.body.scrollLeft; var mouseY = event.clientY + document.body.scrollTop; ``` 然而,对于IE5.5及更高版本,应当使用`document.documentElement`来替换`document.body`,以...
}else if(LT>document.documentElement.clientWidth-oD.offsetWidth){ LT=document.documentElement.clientWidth-oD.offsetWidth; } if(TP){ TP=0; }else if(TP>document.documentElement.clientHeight-oD....
var winW = document.body.clientWidth || document.documentElement.clientWidth; var winH = document.body.clientHeight || document.documentElement.clientHeight; ``` 接着是获取整个网页的宽高和滚动位置。`...
3. **窗体尺寸**:IE通过document.body.offsetWidth和offsetHeight获取尺寸,FF则使用window.innerWidth和innerHeight以及document.documentElement.clientWidth和clientHeight。推荐使用document.body.clientWidth...
var cakLeft = (e.clientX > document.documentElement.clientWidth - menu.offsetWidth) ? (document.documentElement.clientWidth - menu.offsetWidth) : e.clientX; var cakTop = (e.clientY > document....