Javascript获取页面的各种坐标汇总

轉載自：Javascript获取页面的各种坐标汇总-2012-06-17 20:10

说明，本文全部内容都基于各浏览器的标准渲染模式。也就是在HTML文件首部有标签

<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

或

<!DOCTYPEhtml>

1）鼠标点击事件的坐标，相对于可视区域（Client）左上角

varpoint_y=evt.clientY;

varpoint_x=evt.clientX;

其中evt为鼠标点击事件。

2）可视区域左上角的坐标，相对于整个页面(Page)左上角

if(window.pageYOffset!='undefined'){

point.x=window.pageXOffset;

point.y=window.pageYOffset;

}

elseif(typeofdocument.compatMode!='undefined'&&document.compatMode!='BackCompat'){

point.x=document.documentElement.scrollLeft;

point.y=document.documentElement.scrollTop;

}

elseif(typeofdocument.body!='undefined'){

point.x=document.body.scrollLeft;

point.y=document.body.scrollTop;

}

关于document.compatMode，请参考关于document.compatMode的一些介绍

3)某元素的左上角坐标，相对于整个页面（Page）左上角

functionelementLeft(e)

{

varoffset=e.offsetLeft;

if(e.offsetParent!=null)offset+=elementLeft(e.offsetParent);

returnoffset;

}

4)网页全文高和宽

网页正文全文宽document.body.scrollWidth
网页正文全文高document.body.scrollHeight

其中，IE7/IE8/IE9/Firefox行为一致，指的都是抛除position=absolute的元素且不管页面缩放的全文高度；Chrome行为稍有不同，计算宽度和高度时包含了position=absolute的元素；且当页面缩放时，当全文高度/宽度小于可视区域的高度和宽度时，给出的是可视区域的高度和宽度。

5)屏幕分辨率的高和宽

屏幕分辨率的高window.screen.height
屏幕分辨率的宽window.screen.width

其中，当页面不缩放时，三种浏览器的行为一致，都是获得真实的屏幕分辨率；

当页面缩放时，Chrome返回的值不变，而IE7/IE8/IE9/Firefox的行为一致，返回屏幕分辨率/缩放比例。

比如，当屏幕分辨率为1920*1200，缩放比例200%时，返回960*600.

6)网页可视区域的高和宽

网页可见区域宽document.body.clientWidth
网页可见区域高document.body.clientHeight

该高度和宽度扣除了浏览器右侧和底部的滚动条，也扣除了body的margin.

高度=Min(页面高度，可视高度）宽度=Max(页面宽度，可视高度)

其中，如果页面底部是某些元素的margin，则此margin不计算在页面高度内；

注意，页面缩放后，高度不变，宽度为（原始宽度/缩放比例）

7)网页被卷去的高和宽

网页被卷去的宽度window.pageXOffset;document.documentElement.scrollLeft;

网页被卷去的高度window.pageYOffset;document.documentElement.scrollTop;

其中，前者三种浏览器都支持，Chrome不支持后者。

8)某元素ScrollHeight/OffsetHeight/ClientHeight的区别

OffsetHeight为元素的高度，被挡住的部分同样计算在内；其父元素的overflow属性对此值没有影响；自身的overflow高度对此就没有影响。

scrollHeight为元素的高度，被挡住的部分同样计算在内；其父元素的overflow属性对此值没有影响；受自身的overflow影响。

clientHeight为元素的高度，被挡住的部分同样计算在内；其父元素的overflow属性对此值没有影响；受自身的overflow影响。

经过测试，发现在所有情形下scrollHeight与clientHeight的值都相同...有点诡异。

注意，IE系列浏览器的滚动条的宽度和高度是是固定的16px，不受缩放影响；Firefox和Chrome的滚动条在100%的时候是16px，当缩放时，该宽度和高度发生变化，为（16/缩放比例）px.

9）某元素的OffsetTop

对于position!=absolute的元素，offsettop为其相对于其祖先元素中最近的一个postion=relative或position=absolute的元素的偏移。

对于position=absolute的元素，offsettop为其top属性指定的值，如果该属性为空，则与position!=absolute的时候算法相同；

10）某元素的ScrollTop

注意，scrollTop是指某一元素内部的元素被卷去的高度；而不是该元素本身被卷去的高度；

只有当该元素的overflow=auto或scroll的时候，该数值才有意义；