尺寸与坐标

javascript中的尺寸与坐标

坐标系

视口:

顶级窗口或标签页的视口只是实际显示文档内容的浏览器的一部分;不包括浏览器的外壳(如菜单;工具条;标签页等)。框架页中显示的文档的视口是定义了框架页的< iframe >元素;单个元素有滚动条时,内容区域是视口。

视口坐标

有时又称窗口坐标,以视口的左上角为原点。

文档坐标

以显示的文档的左上角为原点。

坐标转换

加上或减去滚动的偏移量。

鼠标的视口坐标

event对象:clientX;clientY

当文档比视口要小时(或未出现滚动);文档左上角就是视口左上角。

使用css指定元素的位置时运用了文档坐标;但最简单的查询元素的位置的方法返回的是视口坐标中的位置,鼠标事件中指针的坐标也是相对视口坐标系的。

位置与尺寸

浏览器窗口滚动条

位置

window对象:pageXOffset+pageYOffset【在ie8-中:scrollLeft+scrollTop ;正常情况下,通过查询文档根节点:document.documentElement获取;怪异模式下:查询document.body获取。】

位置赋值

window对象:scrollTo(文档x,文档y)方法用于设置窗口的滚动偏移量;scrollBy(x,y)方法在当前滚动偏移量的基础上增加偏移量。

尺寸

scrollWidth和scrollHeight是元素的内容区域加上它的内边距在加上任何溢出内容的尺寸。

浏览器窗口视口尺寸

window对象:innerWidth+innerHeight【在ie8-中:clientWidth+clientHeight ;正常情况下:通过查询文档根节点:document.documentElement获取;怪异模式下:查询document.body获取。】

浏览器屏幕窗口尺寸

window对象的screen对象属性:width+height指以像素为单位的窗口大小;availWidth+availHeight指实际可用的显示大小,它排除了桌面任务栏这样的特性所占有的空间。

元素尺寸:(视口坐标)

1. 元素有getBoundingClientRect()方法:返回有trbl属性的对象;其中top和left表示元素左上角坐标,bottom和right表示元素右下角坐标。【非ie中:有width和height属性。ie中:width = right-left;height=bottom-top】【包含边框与内边距;不含外边距。】
内联元素有getClientRects()方法:查询独立的矩形。【都是非实时的】
2. 任何html元素的只读属性offsetWidth和offsetHeight以css像素返回其尺寸【包含边框与内边距;不含外边距。】;offsetTop和offsetLeft一般返回元素文档坐标(即若offsetParent为null);对已定位元素的后代元素或一些其他元素,返回相对祖先元素的坐标。【clientWidth和clientHeight类似offsetWidth和offsetHeight,但不包含边框,只包含内容和内边距。】

判定某点的元素:

1. document对象的elementFromPoint(视口X,视口Y)方法;显示该点最里面和最上面的元素。
2. 鼠标事件对象的target属性包含了相关信息。

star Huang wechat
my wechat public welcomes to your attention