JS和JQUERY获取页面大小,滚动条位置,元素位置(示例代码)

代码如下:

//页面位置及窗口大小

 

function getpagesize() {
var scrw, scrh;
if(window.innerheight && window.scrollmaxy)
{    // mozilla   
scrw = window.innerwidth + window.scrollmaxx;   
scrh = window.innerheight + window.scrollmaxy;
}
else if(document.body.scrollheight > document.body.offsetheight)
{    // all but ie mac   
scrw = document.body.scrollwidth;   
scrh = document.body.scrollheight;
} else if(document.body)
{ // ie mac   
scrw = document.body.offsetwidth;   
scrh = document.body.offsetheight;
}
var winw, winh;
if(window.innerheight)
{ // all except ie   
winw = window.innerwidth;
winh = window.innerheight;
} else if (document.documentelement && document.documentelement.clientheight)
{    // ie 6 strict mode   
winw = document.documentelement.clientwidth;    
winh = document.documentelement.clientheight;
} else if (document.body) { // other   
winw = document.body.clientwidth;   
winh = document.body.clientheight;
}    // for small pages with total size less then the viewport
var pagew = (scrw<winw) ? winw : scrw;
var pageh = (scrh<winh) ? winh : scrh;   
return {pagew:pagew, pageh:pageh, winw:winw, winh:winh};

};

//滚动条位置
function getpagescroll()
{
var x, y; if(window.pageyoffset)
{    // all except ie   
y = window.pageyoffset;   
x = window.pagexoffset;
} else if(document.documentelement && document.documentelement.scrolltop)
{    // ie 6 strict   
y = document.documentelement.scrolltop;   
x = document.documentelement.scrollleft;
} else if(document.body) {    // all other ie   
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