js与jquery获得页面大小、滚动条位置、元素位置
//页面位置及窗口大小
functionGetPageSize(){
varscrW,scrH;
if(window.innerHeight&&window.scrollMaxY)
{//Mozilla
scrW=window.innerWidth+window.scrollMaxX;
scrH=window.innerHeight+window.scrollMaxY;
}
elseif(document.body.scrollHeight>document.body.offsetHeight)
{//allbutIEMac
scrW=document.body.scrollWidth;
scrH=document.body.scrollHeight;
}elseif(document.body)
{//IEMac
scrW=document.body.offsetWidth;
scrH=document.body.offsetHeight;
}
varwinW,winH;
if(window.innerHeight)
{//allexceptIE
winW=window.innerWidth;
winH=window.innerHeight;
}elseif(document.documentElement&&document.documentElement.clientHeight)
{//IE6StrictMode
winW=document.documentElement.clientWidth;
winH=document.documentElement.clientHeight;
}elseif(document.body){//other
winW=document.body.clientWidth;
winH=document.body.clientHeight;
}//forsmallpageswithtotalsizelessthentheviewport
varpageW=(scrW<winW)?winW:scrW;
varpageH=(scrH<winH)?winH:scrH;
return{PageW:pageW,PageH:pageH,WinW:winW,WinH:winH};
};
//滚动条位置
functionGetPageScroll()
{
varx,y;if(window.pageYOffset)
{//allexceptIE
y=window.pageYOffset;
x=window.pageXOffset;
}elseif(document.documentElement&&document.documentElement.scrollTop)
{//IE6Strict
y=document.documentElement.scrollTop;
x=document.documentElement.scrollLeft;
}elseif(document.body){//allotherIE
y=document.body.scrollTop;
x=document.body.scrollLeft;
}
return{X:x,Y:y};
}
jquery
获取浏览器显示区域的高度:$(window).height();
获取浏览器显示区域的宽度:$(window).width();
获取页面的文档高度:$(document).height();
获取页面的文档宽度:$(document).width();
获取滚动条到顶部的垂直高度:$(document).scrollTop();
获取滚动条到左边的垂直宽度:$(document).scrollLeft();
计算元素位置和偏移量
offset方法是一个很有用的方法,它返回包装集中第一个元素的偏移信息。默认情况下是相对body的偏移信息。结果包含top和left两个属性。
offset(options,results)
options.relativeTo 指定相对计算偏移位置的祖先元素。这个元素应该是relative或absolute定位。省略则相对body。
options.scroll 是否把滚动条计算在内,默认TRUE
options.padding 是否把padding计算在内,默认false
options.margin 是否把margin计算在内,默认true
options.border 是否把边框计算在内,默认true