js動態獲得網頁的高度（js動態獲得網頁的高度怎麼設置）

本文目錄一覽：

• 1、js獲取各種高度
• 2、如何用JS動態獲取瀏覽器的寬高
• 3、JS 獲取當前瀏覽器寬高

js獲取各種高度

先來一個瀏覽器窗口大小改變的事件，用來查看瀏覽器窗口的大小被改變可以觸發一些函數

window.onresize 瀏覽器窗口大小改變事件

在寫js的時候偶爾需要獲取各種高度，比如；瀏覽器高度，頁面高度，滾動高度等。

（不加邊線）：

網頁可見區域的高度和寬度（加邊線）：

如何用JS動態獲取瀏覽器的寬高

IE中： 

document.body.clientWidth == BODY對象寬度 

document.body.clientHeight == BODY對象高度 

document.documentElement.clientWidth == 可見區域寬度 

document.documentElement.clientHeight == 可見區域高度

FireFox中： 

document.body.clientWidth == BODY對象寬度 

document.body.clientHeight == BODY對象高度 

document.documentElement.clientWidth == 可見區域寬度 

document.documentElement.clientHeight == 可見區域高度

Opera中： 

document.body.clientWidth == 可見區域寬度 

document.body.clientHeight == 可見區域高度 

document.documentElement.clientWidth == 頁面對象寬度（即BODY對象寬度加上Margin寬） 

document.documentElement.clientHeight == 頁面對象高度（即BODY對象高度加上Margin高） 

沒有定義W3C的標準，則 

IE為： 

document.documentElement.clientWidth == 0 

document.documentElement.clientHeight == 0 

FireFox為： 

document.documentElement.clientWidth == 頁面對象寬度（即BODY對象寬度加上Margin寬) 

document.documentElement.clientHeight == 頁面對象高度（即BODY對象高度加上Margin高） 

Opera為： 

document.documentElement.clientWidth == 頁面對象寬度（即BODY對象寬度加上Margin寬） 

document.documentElement.clientHeight == 頁面對象高度（即BODY對象高度加上Margin高） 

網頁可見區域寬： document.body.clientWidth 

網頁可見區域高： document.body.clientHeight 

網頁可見區域寬： document.body.offsetWidth (包括邊線的寬) 

網頁可見區域高： document.body.offsetHeight (包括邊線的高) 

網頁正文全文寬： document.body.scrollWidth 

網頁正文全文高： document.body.scrollHeight 

網頁被捲去的高： document.body.scrollTop 

網頁被捲去的左： document.body.scrollLeft 

網頁正文部分上： window.screenTop 

網頁正文部分左： window.screenLeft 

屏幕分辨率的高： window.screen.height 

屏幕分辨率的寬： window.screen.width 

屏幕可用工作區高度： window.screen.availHeight 

屏幕可用工作區寬度： window.screen.availWidth 

HTML精確定位:scrollLeft,scrollWidth,clientWidth,offsetWidth 

scrollHeight: 獲取對象的滾動高度。 

scrollLeft:設置或獲取位於對象左邊界和窗口中目前可見內容的最左端之間的距離 

scrollTop:設置或獲取位於對象最頂端和窗口中可見內容的最頂端之間的距離 

scrollWidth:獲取對象的滾動寬度 

offsetHeight:獲取對象相對於版面或由父坐標 offsetParent 屬性指定的父坐標的高度 

offsetLeft:獲取對象相對於版面或由 offsetParent 屬性指定的父坐標的計算左側位置 

offsetTop:獲取對象相對於版面或由 offsetTop 屬性指定的父坐標的計算頂端位置 

event.clientX 相對文檔的水平座標 

event.clientY 相對文檔的垂直座標 

event.offsetX 相對容器的水平坐標 

event.offsetY 相對容器的垂直坐標 

document.documentElement.scrollTop 垂直方向滾動的值 

event.clientX+document.documentElement.scrollTop 相對文檔的水平座標+垂直方向滾動的量

示例：

var winWidth = 0; 

var winHeight = 0; 

function findDimensions() //函數：獲取尺寸 

{ 

    //獲取窗口寬度 

    if (window.innerWidth) 

        winWidth = window.innerWidth; 

    else if ((document.body)  (document.body.clientWidth)) 

        winWidth = document.body.clientWidth; 

    //獲取窗口高度 

    if (window.innerHeight) 

        winHeight = window.innerHeight; 

    else if ((document.body)  (document.body.clientHeight)) 

        winHeight = document.body.clientHeight; 

    //通過深入Document內部對body進行檢測，獲取窗口大小 

    if (document.documentElement  document.documentElement.clientHeight  document.documentElement.clientWidth) 

    { 

        winHeight = document.documentElement.clientHeight; 

        winWidth = document.documentElement.clientWidth; 

    } 

    //結果輸出至兩個文本框 

    document.form1.availHeight.value= winHeight; 

    document.form1.availWidth.value= winWidth; 

} 

findDimensions(); 

//調用函數，獲取數值 

window.onresize=findDimensions;

JS 獲取當前瀏覽器寬高

JQuery獲取：

console.log($(window).width()); //瀏覽器當前窗口可視區域寬度

console.log($(window).height()); //瀏覽器當前窗口可視區域高度

console.log($(document).width());//瀏覽器當前窗口文檔對象寬度

console.log($(document).height()); //瀏覽器當前窗口文檔的高度

console.log($(document.body).width());//瀏覽器當前窗口文檔body的寬度

console.log($(document.body).height());//瀏覽器當前窗口文檔body的高度

console.log($(document.body).outerWidth(true));//瀏覽器當前窗口文檔body的總寬度 包括border padding margin

console.log($(document.body).outerHeight(true));//瀏覽器當前窗口文檔body的總高度 包括border padding margin

JS獲取：

窗口可視區域寬度 ： document.documentElement.clientWidth || document.body.clientWidth;

窗口可視區域高度 ： document.documentElement.clientHeight || document.body.clientHeight;

窗口可視區域寬度+邊線和滾動條 ： document.body.offsetWidth ;

窗口可視區域高度+邊線和滾動條 ： document.body.offsetHeight ;

實際內容的寬度 ： document.body.scrollWidth;

實際內容的高度 ： document.body.scrollHeight;

滾動條下拉被捲起來的距離 ：document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop;

滾動條側拉被捲起來的距離 ：document.body.scrollLeft || document.documentElement.scrollLeft ;

網頁正文部分上 ：window.screenTop;

網頁正文部分左 ：window.screenLeft;

元素的寬度 ：obj.offsetWidth;

元素的高度 ：obj.offsetHeight;

相對於父元素的上位移 ：obj.offsetTop;（在元素的包含元素不含滾動條的情況下）

相對於父元素的左位移 ：obj.offsetLeft;（在元素的包含元素不含滾動條的情況下）