js中獲取窗口高度的方法

js中獲取窗口高度的方法

取窗口滾動條滾動高度

function getScrollTop()
{
  var scrollTop=0;
  if(document.documentElement&&document.documentElement.scrollTop)
  {
  scrollTop=document.documentElement.scrollTop;
  }
  else if(document.body)
  {
  scrollTop=document.body.scrollTop;
  }
  return scrollTop;
}

取窗口可視范圍的高度

function getClientHeight()
{
  var clientHeight=0;
  if(document.body.clientHeight&&document.documentElement.clientHeight)
  {
  var clientHeight = (document.body.clientHeight<document.documentElement.clientHeight)?document.body.clientHeight:document.documentElement.clientHeight;
  }
  else
  {
  var clientHeight = (document.body.clientHeight>document.documentElement.clientHeight)?document.body.clientHeight:document.documentElement.clientHeight;
  }
  return clientHeight;
}

取文檔內容實際高度

function getScrollHeight()
{
  return Math.max(document.body.scrollHeight,document.documentElement.scrollHeight);
}
////////////////////////////////////////////////////

在IE中:
document.body.clientWidth ==> BODY對象寬度
document.body.clientHeight ==> BODY對象高度
document.documentElement.clientWidth ==> 可見區(qū)域寬度
document.documentElement.clientHeight ==> 可見區(qū)域高度
document.documentElement.scrollTop =>窗口滾動條滾動高度
在FireFox中:
document.body.clientWidth ==> BODY對象寬度
document.body.clientHeight ==> BODY對象高度
document.documentElement.clientWidth ==> 可見區(qū)域寬度
document.documentElement.clientHeight ==> 可見區(qū)域高度
document.documentElement.scrollTop =>窗口滾動條滾動高度

在chrome中:
document.body.clientWidth ==> BODY對象寬度
document.body.clientHeight ==> BODY對象高度
document.documentElement.clientWidth ==> 可見區(qū)域寬度
document.documentElement.clientHeight ==> 可見區(qū)域高度
document.body.scrollTop =>窗口滾動條滾動高度

在Opera中:
document.body.clientWidth ==> 可見區(qū)域寬度
document.body.clientHeight ==> 可見區(qū)域高度
document.documentElement.clientWidth ==> 頁面對象寬度(即BODY對象寬度加上Margin寬)
document.documentElement.clientHeight ==> 頁面對象高度(即BODY對象高度加上Margin高

滾動到頂部 window.scrollTo(0,0)
滾動到尾部 window.scrollTo(0,document.body.clientHeight)


js計算滾動條高度及窗口高度

//頁面位置及窗口大小
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 

獲取瀏覽器顯示區(qū)域的高度 :
(window).height(); 獲取瀏覽器顯示區(qū)域的寬度 :(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

http://www.cnblogs.com/hoojo/archive/2012/02/16/2354663.html

alert((window).height()); //瀏覽器當前窗口可視區(qū)域高度 alert((document).height()); //瀏覽器當前窗口文檔的高度
alert((document.body).height());//瀏覽器當前窗口文檔body的高度 alert((document.body).outerHeight(true));//瀏覽器當前窗口文檔body的總高度 包括border padding margin
alert((window).width()); //瀏覽器當前窗口可視區(qū)域寬度 alert((document).width());//瀏覽器當前窗口文檔對象寬度
alert((document.body).width());//瀏覽器當前窗口文檔body的高度 alert((document.body).outerWidth(true));//瀏覽器當前窗口文檔body的總寬度 包括border padding margin

// 獲取頁面的高度瓜富、寬度
function getPageSize() {
var xScroll, yScroll;
if (window.innerHeight && window.scrollMaxY) {
xScroll = window.innerWidth + window.scrollMaxX;
yScroll = window.innerHeight + window.scrollMaxY;
} else {
if (document.body.scrollHeight > document.body.offsetHeight) { // all but Explorer Mac
xScroll = document.body.scrollWidth;
yScroll = document.body.scrollHeight;
} else { // Explorer Mac...would also work in Explorer 6 Strict, Mozilla and Safari
xScroll = document.body.offsetWidth;
yScroll = document.body.offsetHeight;
}
}
var windowWidth, windowHeight;
if (self.innerHeight) { // all except Explorer
if (document.documentElement.clientWidth) {
windowWidth = document.documentElement.clientWidth;
} else {
windowWidth = self.innerWidth;
}
windowHeight = self.innerHeight;
} else {
if (document.documentElement && document.documentElement.clientHeight) { // Explorer 6 Strict Mode
windowWidth = document.documentElement.clientWidth;
windowHeight = document.documentElement.clientHeight;
} else {
if (document.body) { // other Explorers
windowWidth = document.body.clientWidth;
windowHeight = document.body.clientHeight;
}
}
}
// for small pages with total height less then height of the viewport
if (yScroll < windowHeight) {
pageHeight = windowHeight;
} else {
pageHeight = yScroll;
}
// for small pages with total width less then width of the viewport
if (xScroll < windowWidth) {
pageWidth = xScroll;
} else {
pageWidth = windowWidth;
}
arrayPageSize = new Array(pageWidth, pageHeight, windowWidth, windowHeight);
return arrayPageSize;
}

// 滾動條
document.body.scrollTop;
$(document).scrollTop();
?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市珊拼,隨后出現(xiàn)的幾起案子食呻,更是在濱河造成了極大的恐慌,老刑警劉巖澎现,帶你破解...
    沈念sama閱讀 206,378評論 6 481
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件仅胞,死亡現(xiàn)場離奇詭異,居然都是意外死亡剑辫,警方通過查閱死者的電腦和手機干旧,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 88,356評論 2 382
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來妹蔽,“玉大人椎眯,你說我怎么就攤上這事「炱瘢” “怎么了编整?”我有些...
    開封第一講書人閱讀 152,702評論 0 342
  • 文/不壞的土叔 我叫張陵,是天一觀的道長乳丰。 經(jīng)常有香客問我掌测,道長,這世上最難降的妖魔是什么产园? 我笑而不...
    開封第一講書人閱讀 55,259評論 1 279
  • 正文 為了忘掉前任汞斧,我火速辦了婚禮,結果婚禮上什燕,老公的妹妹穿的比我還像新娘粘勒。我一直安慰自己,他們只是感情好屎即,可當我...
    茶點故事閱讀 64,263評論 5 371
  • 文/花漫 我一把揭開白布庙睡。 她就那樣靜靜地躺著,像睡著了一般技俐。 火紅的嫁衣襯著肌膚如雪埃撵。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 49,036評論 1 285
  • 那天虽另,我揣著相機與錄音暂刘,去河邊找鬼。 笑死捂刺,一個胖子當著我的面吹牛谣拣,可吹牛的內容都是我干的。 我是一名探鬼主播族展,決...
    沈念sama閱讀 38,349評論 3 400
  • 文/蒼蘭香墨 我猛地睜開眼森缠,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了仪缸?” 一聲冷哼從身側響起贵涵,我...
    開封第一講書人閱讀 36,979評論 0 259
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后宾茂,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體瓷马,經(jīng)...
    沈念sama閱讀 43,469評論 1 300
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 35,938評論 2 323
  • 正文 我和宋清朗相戀三年跨晴,在試婚紗的時候發(fā)現(xiàn)自己被綠了欧聘。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 38,059評論 1 333
  • 序言:一個原本活蹦亂跳的男人離奇死亡端盆,死狀恐怖怀骤,靈堂內的尸體忽然破棺而出,到底是詐尸還是另有隱情焕妙,我是刑警寧澤蒋伦,帶...
    沈念sama閱讀 33,703評論 4 323
  • 正文 年R本政府宣布,位于F島的核電站焚鹊,受9級特大地震影響痕届,放射性物質發(fā)生泄漏。R本人自食惡果不足惜寺旺,卻給世界環(huán)境...
    茶點故事閱讀 39,257評論 3 307
  • 文/蒙蒙 一爷抓、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧阻塑,春花似錦蓝撇、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,262評論 0 19
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至走搁,卻和暖如春独柑,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背私植。 一陣腳步聲響...
    開封第一講書人閱讀 31,485評論 1 262
  • 我被黑心中介騙來泰國打工忌栅, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人曲稼。 一個月前我還...
    沈念sama閱讀 45,501評論 2 354
  • 正文 我出身青樓索绪,卻偏偏與公主長得像,于是被迫代替她去往敵國和親贫悄。 傳聞我的和親對象是個殘疾皇子瑞驱,可洞房花燭夜當晚...
    茶點故事閱讀 42,792評論 2 345

推薦閱讀更多精彩內容