js与jquery获得页面大小、滚动条位置、元素位置

sunnygirls 2015-04-09

//页面位置及窗口大小

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

相关推荐