`
pouyang
  • 浏览: 313119 次
  • 性别: 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

分享到:
评论

相关推荐

    原生js实现小球在屏幕上自由移动,当遇到屏幕边缘时反弹

    小球在桌面上自由移动,要清楚的几个问题 ...宽:document.documentElement.clientWidth || document.body.clientWidth; 高:document.documentElement.clientHeight || document.body.clientHeight;

    js获取页面及个元素高度、宽度的代码

    网页可见区域宽: document.body.clientWidth; 网页可见区域高: document.body.clientHeight; 网页可见区域宽: document.body.offsetWidth (包括边线和滚动条的宽); 网页可见区域高: document.body....

    js 调色板 纯js

    if (event.clientX+clrPanel.style.pixelWidth > document.body.clientWidth) { //对话框显示在鼠标右方时,会出现遮挡,将其显示在鼠标左方 left -= clrPanel.style.pixelWidth; } if (event.clientY+...

    JS获取网页属性包括宽、高等等

    s += ” 网页可见区域宽:”+ document.body.clientWidth+” “; s += ” 网页可见区域高:”+ document.body.clientHeight+” “; s += ” 网页可见区域宽:”+ document.body.offsetWidth + ” (包括边线和滚动条...

    获取页面长宽和滚动条的位置

    winW = document.body.clientWidth; winH = document.body.clientHeight; } // for small pages with total size less then the viewport var pageW = (scrW) ? winW : scrW; var pageH = (scrH) ? ...

    浏览器常用高宽的jquery插件

    代码如下: (function($) { /** * 取得浏览器视图的宽度 */ $.viewWidth=... } else if( D.body && D.body.clientWidth ) { w = D.body.clientWidth; } return w ; } /** * 取得浏览器视图的高度 */ $.viewHeight=fu

    scrollLeft,scrollTop等等详解.pdf

    网页可见区域宽: document.body.clientWidth; 网页可见区域高: document.body.clientHeight; 网页可见区域宽: document.body.offsetWidth (包括边线的宽); 网页可见区域高: document.body.offsetHeight (包括...

    JS针对浏览器窗口关闭事件的监听方法集锦

    本文实例总结了JS针对浏览器窗口关闭事件的监听...if(event.clientX>document.body.clientWidth&&event.clientY<0||event.altKey) { return "您要离开吗?"; } } [removed] 方式二:适用于IE和FF,不区分刷新和关闭

    javascript获取网页宽高方法汇总

    document.body.clientWidth – 网页可见区域宽 document.body.clientHeight – 网页可见区域高 document.body.offsetWidth – 网页可见区域宽,包括边线和滚动条的宽 document.body.offsetHeight – 网页可见区域高...

    【JavaScript源代码】JavaScript获取网页的宽高及如何兼容详解.docx

    JavaScript获取网页的宽高及如何兼容详解  很多场景下会需要获取当前网页的宽高来达到一些... console.log(document.documentElement.clientWidth); console.log(document.documentElement.clientHeight); docum

    Js与Jq获取浏览器和对象值的方法

    JS and Jquery 都能获取页面元素的宽度,高度和相对位移等数值,那他们之间能...document.body.clientWidth ==> BODY对象宽度 document.body.clientHeight ==> BODY对象高度 Jq获取浏览器高度和宽度 $(window).widt

    Js与Jq 获取页面元素值的方法和差异对比

    JS与Jquery 都能获取页面元素的宽度,高度和相对位移等数值,那他们之间能...document.body.clientWidth ==> BODY对象宽度 document.body.clientHeight ==> BODY对象高度 Jq获取浏览器高度和宽度 $(window).width

    js实现在已有的网站中添加飞翔图片不影响之前布局

    width = document.body.clientWidth; height = document.body.clientHeight; Hoffset = dd.offsetHeight; Woffset = dd.offsetWidth; dd.style.left = xPos + document.body.scrollLeft; dd.style.top = yPos + ...

    IE与FF下javascript获取网页及窗口大小的区别详解

    在新定义出来的标准下 document.... s += ” 网页可见区域宽:”+ document.body.clientWidth; s += ” 网页可见区域高:”+ document.body.clientHeight; s += ” 网页可见区域宽:”+ document.body.offsetWi

    用document.documentElement取代document.body的原因分析

    上次的测试说明了document.body属性并不会给我们返回预期的结果,比如我们用document.body.clientHeight原本想取得“页面可见区域高度”,可实际上返回的是“页面实际内容高度”。 那我们怎么办呢?难道加上了文档...

    js获取浏览器基本信息大全

    网页可见区域宽:document.body.clientWidth 网页可见区域高:document.body.clientHeight 网页可见区域宽:document.body.offsetWidth (包括边线的宽) 网页可见区域高:document.body.offsetHeight (包括边线的宽) ...

    js获取input长度并根据页面宽度设置其大小及居中对齐

    网页可见区域宽:document.body.clientWidth 网页可见区域高:document.body.clientHeight 网页可见区域宽:document.body.offsetWidth (包括边线的宽) 网页可见区域高:document.body.offsetHeight (包括边线的宽) ...

    JS 获取浏览器和屏幕宽高等信息代码

    网页可见区域宽:document.body.clientWidth 网页可见区域高:document.body.clientHeight 网页可见区域宽:document.body.offsetWidth (包括边线的宽) 网页可见区域高:document.body.offsetHeight (包括边线的宽) ...

    JS 获取浏览器和屏幕宽高等信息的实现思路及代码

    网页可见区域宽:document.body.clientWidth 网页可见区域高:document.body.clientHeight 网页可见区域宽:document.body.offsetWidth (包括边线的宽) 网页可见区域高:document.body.offsetHeight (包括边线的宽) ...

    JS获取屏幕,浏览器窗口大小,网页高度宽度(实现代码)

    网页可见区域宽:document.body.clientWidth 网页可见区域高:document.body.clientHeight 网页可见区域宽:document.body.offsetWidth (包括边线的宽) 网页可见区域高:document.body.offsetHeight (包括边线的宽) ...

Global site tag (gtag.js) - Google Analytics