1、窗口位置
窗口对象对应的是window对象。在window对象中运用属性screenTop、screenLeft、screenY和screenX（单元为像素）两组属性来示意窗口相关于屏幕上边和左边的位置。但在各个阅读器中，对着两组属性的支撑有所不同，个中ScreenTop和ScrennLeft属性IE，Safari、Opera和Chrome中用来示意窗口位置属性，而screenX和screenY是FIrefox、Safari和Chrome中用来示意窗口位置的属性。也就说，Safari和Chrome同时支撑这两种属性。别的，在Opera中也支撑screenX和screenY属性，但与screenTop和screenLeft并不对应，因而，在Opera中不应当运用这两个属性。猎取跨阅读器窗口位置的代码应当以下：
var leftPos = (typeof window.screenLeft === "number") ? window.screenLeft : window.screenX;
var topPos = (typeof window.screenTop === "number") ? window.screenTop : window.screenY;
须要注重的是，在IE和Opera中screenLeft和ScreenTop中保留的是从屏幕左上角到window对象示意的页面的可见地区的间隔，而且假如window对象示意的是页面中的框架时，则返回该框架相关于屏幕左上角的间隔。而在Firefox、Safari和Chrome中，screenX和screenY两个属性，则不管window对象代表的是不是是框架，一直返回最外层的window对象相关于左上角的间隔，也就是top.screenX和screenY。因而，不能够精准的跨阅读器猎取窗口的位置。
虽然不能精准的猎取窗口的位置，但却能够运用moveTo( )和moveBy( )两个要领，将窗口正确的挪动到一个新位置。moveTo( )吸收两个参数，代表新位置的坐标，moveBy( )要领也吸收两个参数，示意在水温和垂直方向上挪动的像素数。比方：
/*将窗口挪动到(150,360)*/
window.moveTo(150,360);
/*将窗口向下挪动100px*/
window.moveBy(0,100);
别的，须要注重的是：
（1）这两个要领能够会被阅读器禁用，在IE7及更高版本和Opera中默许就是禁用的。
（2）这两个要领只能在最外层window对象中运用，不实用于框架
2、窗口大小
IE9+和其他主流阅读器都供应了下面的四个属性来示意阅读器窗口的尺寸：
innerWidth：示意该容器中页面视图区的宽度（减去边框）
innerHeight：示意该容器中页面视图区的高度（减去边框）
outerWidth：示意阅读器窗口本身的宽度（在框架中也实用）
outerHeight：示意阅读器窗口本身的高度（在框架中也实用）
在Opera中outerWidth和outerHeight两个属性，示意的单个标签页对应的阅读器窗口的大小。在Chrome中上面的两组属性雷同，都示意视口的大小，而不是阅读器窗口的大小。
在IE8及更早的阅读器中，没有供应猎取阅读器窗口的尺寸的属性。但它经由过程DOM供应了页面可见地区的相干信息，而且这些信息，在其他阅读器中都能够运用。document.documentElement.clientWidth 和 document.documentElement.clientHeight 中保留了页面视口的宽度和高度。而在IE6的混淆形式下，则须要经由过程document.body中的响应属性去猎取。
在跨阅读器的情况下，虽然不能猎取窗口的大小，但能够猎取视口的大小，在不斟酌IE6混淆形式的情况下，能够运用下面的代码：
var viewWidth = (typeof window.innerWidth === "number") ? window.innerWidth : document.documentElement.clientWidth;
var viewHeight = (typeof window.innerHeight === "number") ? window.innerHeight : document.documentElement.clientHeight;
关于挪动装备，window.innerHeight 和 window.innerWidth 保留和可见视口，而挪动IE不支撑这两个属性，但在document.documentElement.clientHeight 和 document.documentElementWidth 中保留这一样的属性。但在其他阅读器中，背面的这两个属性示意的是全部页面规划视口，也就是页面选然后的现实大小。而IE把背面的这两属性，保留在document.body.clientWidth和document.documentElemtn.clientHeight中。
运用 resizeTo( ) 和 resizeBy( )两个要领能够调解窗口的大小，resizeTo( )要领吸收两个参数，新的宽度和高度; resizeBy( )要领也吸收两个参数，新窗口和元窗口的宽度和高度差。比方：
/*将窗口调解到300*300*/
window.resizeTo(300,300);
/*将窗口扩展的100*50*/
window.resizeBy(100,50);
3、元素大小
猎取或设置元素大小的属性和要领，不属于DOM的范例，但各个阅读器都已支撑。
3.1偏移量
经由过程下面的4个属性（都以像素计）能够或得元素的偏移量：
offsetHeight：元素在垂直方向上占用的空间大小。包括元素的高低边框和转动条（假如有），但不包括外边距。
offsetWidht：元素在程度方向桑占用的空间的大小。同上。
offsetLeft：元素的左外边框到包括元素的左内边框的间隔
offsetTop：元素的上外边框到包括元素的上内边框的间隔
别的，另有一个offsetParent 属性，指向包括该元素的援用。offsetParent属性与ParentNode属性不一定相称，比方，<td>元素的offsetParent属性指向的就是他的先人元素<table>。
经由过程offsetTop、offsetLeft和offsetParent属性，经由过程不停的向上轮回叠加，能够基础正确的猎取元素的偏移量，比方：
/*猎取元素的偏移量*/
function getElementLeft(elem){
var actualLeft = elem.offsetLeft,
current = elem.offsetParent;
while(current != null){
actualLeft += current.offsetLeft;
current = current.offsetParent;
}
return actualLeft;
}
function getElementTop(elem){
var actualTop = elem.offsetTop,
current = elem.offsetParent;
while(current != null){
actualTop += current.offsetTop;
current = current.offsetParent;
}
return actualTop;
}
上面的两个函数，经由过程不停的叠加offsetLeft 和 offsetTop 值，猎取相对正确（不包括一切的的边框的宽度）的元素相关于页面的偏移量。
注：这4个属性是只读的
3.2 客户区大小
元素的客户区大小指的是元素的内容，及其内边距占有的空间的大小。运用下面的两个属性示意：
clientWidth：元素内容地区加摆布内边距的宽度
clientHeight：元素内容地区加高低内边距的宽度
注：这两个属性是只读的
3.3 转动大小
转动大小指的是包括转动内容的元素的大小。运用下面的4个属性示意：
scrollWidth：在没有转动条时，示意内容元素的高度，和width属性雷同；在有转动条时，包括转动条和隐蔽部份的总高度。
scrollHeight：在没有转动条时，示意内容元素的宽度，和height属性雷同；在有转动条时，包括转动条和隐蔽部份的总宽度。
scrollLeft：被隐蔽在内容区左边的像素数。经由过程设置这个属性，能够转变元素的转动位置。
scrollHeight：被隐蔽在内容区上方的像素数。经由过程设置这个属性，能够转变元素的转动位置。
scrollWidth 和 scrollHeight 属性重要用来肯定元素内容的现实大小。比方，带有转动条的页面的高度是 documen.documentElement.scrollHeight。但关于不包括转动条的页面，在各个阅读器中 scrollHeight 和 scrollWidth 与 clientWidth 和 clientHeight 示意的宽高有交织，为了正确的猎取文档的总高度，应当运用这两组属性较大的一个。比方，下面的代码：
/*猎取文档的高度*/
var docHeight = Math.max(document.documentElement.scrollHeight,
document.documentElement.clientHeight);
/*猎取文档的宽度*/
var docWidth = Math.max(document.documentElement.scrollWidth,
document.documentElement.clientWidth);
scrollLeft和scrollTop属性既能够肯定当前元素的转动状况，也能够用来设置元素的转动位置。比方，当元素不是顶部时，设置它转动到顶部：
/*设置元素返回顶部*/
function scrollToTop(elem){
if(elem.scrollTop != 0){
elem.scrollTop = 0;
}
}
3.4 肯定元素的大小
阅读器为每一个元素供应了一个getBoundingClientRect( )要领，这个要领返回一个矩形对象，包括：left，top，right 和 bottom 属性，这些属性给出了元素相关于阅读器中的视口的位置。但在IE8及之前的阅读器中以为文档的坐上角的坐标是（2，2），而IE9+和其他阅读器则以为是（0，0）。因而，在运用的时刻，须要起首检测文档左上角的左边。别的，在一些阅读中不支撑getBoundingClientRect( )要领，这是能够运用元素的offsetLeft、offsetHeight属性，以及文档的scrollLeft和scrollTop属性来猎取元素相关于视口的top、left、bottom和right属性。综上，能够运用下面的函数来完成跨阅读器猎取元素的 rect 对象：
function getBoundingClientRect(elem){
var scrollTop = document.documentElement.scrollTop;
var scrollLeft = document.documentElement.scrollLeft
if(elem.getBoundingClientRect){
if(typeof arguments.callee.offset != "number"){
var temp = document.createElement("div");
temp.style.cssText = "positon:absolute;left:0;top:0;";
document.body.appendChild(temp);
arguments.callee.offset = -temp.getBoundingClientRect().top - scrollTop;
document.body.removeChild(temp);
temp = null;
}
var rect = elem.getBoundingClientRect();
var offset = arguments.callee.offset;
return {
left : rect.left + offset,
right : rect.right + offset,
top : rect.top + offset,
bottom : rect.bottom + offset
}
}else{
var actualLeft = getElementLeft(elem);
var actualTop = getElementTop(elem);
return {
left : actualLeft - scrollLeft,
right : actualLeft + elem.offsetWidth - scrollLeft,
top : actualTop - scrollTop,
bottom : actualTop + elem.offsetHeight - scrollTop
}
}
}
参考资料：javaScript高等程序设计
