标签：版本 frame 文档 一般来说 width tom 除了 尺寸 top
一：文档坐标和视口坐标
在顶级窗口和标签页中，“视口”只是实际显示文档内容的浏览器的一部分：它不包括浏览器的“外壳（如菜单，工具条和标签页）。针对框架页中显示的文档，视口只是定义了框架页的《iframe》”
如果文档比视口小，或者说他还未出现滚动，则文档的左上角就是视口的左上角，文档和视口坐标系统就是同一个。但是，一般来说，要在两种坐标之间互相转换，必须加上或减去滚动的偏移量（scroll offset）。
例如，在文档坐标中如果一个元素的Y坐标是200px，并且用户已经把浏览器向下滚动75px；那么视口坐标中元素的Y坐标就是275px。文档坐标比视口坐标更加基础，并且在用户滚动中不会发生变化。
二：查询元素的几何尺寸
判定一个元素的尺寸和位置最简单的办法就是调用它的getBoundingClientRectangle（）方法。他不需要参数，返回一个有left，right，top和bottom的属性。
var obox = document.getElementById("box"); var arr = obox.getBoundingClientRect(); console.log(arr.width)/*200*/
三：总结
var obox = document.getElementById("box"); /*除了IE8及更早的版本外，其他的浏览器都可以用*/ pageXOffset; pageYOffset; /*标准模式下的IE，任何浏览器*/ document.documentElement.scrollLeft; document.documentElement.scrollTop; /*滚动条的位置*/ document.documentElement.offsetHeight; document.documentElement.offsetWidth; /*元素的尺寸,以CSS像素返回它的屏幕尺寸，返回的尺寸包含元素的边框和内边距，出去了外边距*/ obox.offsetWidth; obox.offsetHeight; /*元素的位置，返回x和y坐标*/ obox.offsetLeft; obox.offsetTop; /*元素的尺寸，不包含边框大小，至包含内容和它的内边距。*/ obox.clientWidth; obox.clientHeight;
标签：版本 frame 文档 一般来说 width tom 除了 尺寸 top
原文地址：http://www.cnblogs.com/QianBoy/p/7604365.html
