`
pouyang
  • 浏览: 321579 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

JS body.clientWidth,documentElement.clientWidth,clientX

阅读更多


eventxclientXoffsetXscreenX

·         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.scrollTop用法

    - **document.body.clientWidth**: 表示网页可见区域的宽度(不包含滚动条)。 - **document.body.clientHeight**: 表示网页可见区域的高度(不包含滚动条)。 - **document.body.offsetWidth**: 包含边框在内的网页...

    JS获取浏览器的高度和宽度

    - `document.body.clientWidth` 和 `document.body.clientHeight` 同样返回BODY对象的宽度和高度。 - `document.documentElement.clientWidth` 和 `document.documentElement.clientHeight` 返回的是包含边距的页面...

    js获取屏幕分辨率的方法

    - `document.body.clientWidth` 和 `document.body.clientHeight` 分别代表BODY对象的宽度和高度。 - `document.documentElement.clientWidth` 和 `document.documentElement.clientHeight` 表示可见区域的宽度和...

    javascript窗口宽高,鼠标位置,滚动高度(详细解析).docx

    3. **`document.body.clientWidth` 和 `document.body.clientHeight`**: - 返回文档主体元素的可视区域宽度和高度。 - 当前页面没有滚动条时,返回的是实际内容的宽度和高度;如果页面有滚动条,则返回的值比实际...

    js中的如何定位固定层的位置.docx

    当需要定位鼠标相对于页面的绝对位置时,通常会使用`event.clientX + document.body.scrollLeft`和`event.clientY + document.body.scrollTop`。但需要注意的是,对于IE5.5及更高版本,需要特别处理`document.body....

    js常用代码集锦.

    在本文中,我们将深入探讨一些关于JS中`document.documentElement`、`document.body`及其相关属性的知识点,以及如何处理不同情况下的滚动和尺寸获取。 在HTML文档中,`document.body`通常指的是HTML中的<body>元素...

    前端vue.js

    var w = document.documentElement.clientWidth || document.body.clientWidth; var h = document.documentElement.clientHeight || document.body.clientHeight; ``` 2. **`offsetHeight` 和 `offsetWidth`** ...

    JS浏览器的高度和宽度

    - **`document.body.clientWidth`**: 返回 BODY 元素的可见宽度(不包括滚动条和边框)。 - **`document.body.clientHeight`**: 返回 BODY 元素的可见高度(不包括滚动条和边框)。 这些属性可以用于任何元素,但...

    JavaScript兼容浏览器FFIE技巧[定义].pdf

    - IE使用document.body.offsetWidth和document.body.offsetHeight,FF使用window.innerWidth、window.innerHeight以及document.documentElement.clientWidth和document.documentElement.clientHeight。 - 通用做法...

    由document.body和document.documentElement想到的

    在Web开发中,理解和掌握`document.body`和`document.documentElement`的区别至关重要,尤其是在处理页面布局和兼容性问题时。这两个对象分别代表了HTML文档的不同部分:`document.body`指的是HTML文档的实际内容...

    js常用的dom高度长度详细

    - `document.body.clientWidth` 和 `document.body.clientHeight` 分别返回浏览器窗口可见区域的宽度和高度,不包括滚动条。 - `document.body.offsetWidth` 和 `document.body.offsetHeight` 包括了边框,提供了...

    js 获取浏览器高度和宽度值(多浏览器)

    在 IE 中,可以使用 `document.body` 和 `document.documentElement` 两个对象来获取浏览器的高度和宽度值。 * `document.body.clientWidth`: 获取 BODY 对象的宽度。 * `document.body.clientHeight`: 获取 BODY ...

    Javascript获取页面、屏幕尺寸大小参数.

    为了确保代码的跨浏览器兼容性,开发者通常需要进行适当的检测和适配,使用`window.innerWidth`和`window.innerHeight`作为更通用的解决方案,同时考虑到`document.documentElement`和`document.body`在某些情况下的...

    javascript兼容性解决方法大全

    对于窗体的高度和宽度,IE使用`document.body.offsetWidth`和`document.body.offsetHeight`,但FF提供了`window.innerWidth`和`window.innerHeight`,以及`document.documentElement.clientWidth`和`document....

    js兼容IE火狐问题

    通用方法是使用`document.body.clientWidth`和`document.body.clientHeight`。 3. **事件绑定** - **添加事件监听器**:IE使用`element.attachEvent("onclick", function);`,FF使用`element.addEventListener(...

    js中的如何定位固定层的位置

    var mouseX = event.clientX + document.body.scrollLeft; var mouseY = event.clientY + document.body.scrollTop; ``` 然而,对于IE5.5及更高版本,应当使用`document.documentElement`来替换`document.body`,以...

    基于原生JavaScript拖拽效果的实现.pdf

    }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....

    谈谈JS中常遇到的浏览器兼容问题和解决方法

    var winW = document.body.clientWidth || document.documentElement.clientWidth; var winH = document.body.clientHeight || document.documentElement.clientHeight; ``` 接着是获取整个网页的宽高和滚动位置。`...

    HTML在IE浏览器和FF浏览器中标签的使用

    3. **窗体尺寸**:IE通过document.body.offsetWidth和offsetHeight获取尺寸,FF则使用window.innerWidth和innerHeight以及document.documentElement.clientWidth和clientHeight。推荐使用document.body.clientWidth...

    JavaScript模拟鼠标右键菜单效果_.docx

    var cakLeft = (e.clientX > document.documentElement.clientWidth - menu.offsetWidth) ? (document.documentElement.clientWidth - menu.offsetWidth) : e.clientX; var cakTop = (e.clientY > document....

Global site tag (gtag.js) - Google Analytics