如何使用 JavaScript 獲取頁面，窗口的高度

javascript里面document.body的clientWidth、clientHeight、offsetWidth ?、offsetHeight 等屬性可以獲得網(wǎng)頁可見區(qū)域的寬和高，window和window.screen也有一些相關(guān)屬性，例子代碼如下：

創(chuàng)新互聯(lián)建站主營阿勒泰網(wǎng)站建設(shè)的網(wǎng)絡(luò)公司,主營網(wǎng)站建設(shè)方案,成都app軟件開發(fā),阿勒泰h5微信小程序開發(fā)搭建,阿勒泰網(wǎng)站營銷推廣歡迎阿勒泰等地區(qū)企業(yè)咨詢

bodySCRIPT?LANGUAGE="JavaScript"

var??s?=?"";

s?+=?"\r\n網(wǎng)頁可見區(qū)域?qū)挘?+?document.body.clientWidth;

s?+=?"\r\n網(wǎng)頁可見區(qū)域高："+?document.body.clientHeight;

s?+=?"\r\n網(wǎng)頁可見區(qū)域?qū)挘?+?document.body.offsetWidth??+"?(包括邊線和滾動(dòng)條的寬)";

s?+=?"\r\n網(wǎng)頁可見區(qū)域高："+?document.body.offsetHeight?+"?(包括邊線的寬)";

s?+=?"\r\n網(wǎng)頁正文全文寬："+?document.body.scrollWidth;

s?+=?"\r\n網(wǎng)頁正文全文高："+?document.body.scrollHeight;

s?+=?"\r\n網(wǎng)頁被卷去的高："+?document.body.scrollTop;

s?+=?"\r\n網(wǎng)頁被卷去的左："+?document.body.scrollLeft;

s?+=?"\r\n網(wǎng)頁正文部分上："+?window.screenTop;

s?+=?"\r\n網(wǎng)頁正文部分左："+?window.screenLeft;

s?+=?"\r\n屏幕分辨率的高："+?window.screen.height;

s?+=?"\r\n屏幕分辨率的寬："+?window.screen.width;

s?+=?"\r\n屏幕可用工作區(qū)高度："+?window.screen.availHeight;

s?+=?"\r\n屏幕可用工作區(qū)寬度："+?window.screen.availWidth;

s?+=?"\r\n你的屏幕設(shè)置是?"+?window.screen.colorDepth?+"?位彩色";

s?+=?"\r\n你的屏幕設(shè)置?"+?window.screen.deviceXDPI?+"?像素/英寸";

alert(s);

/SCRIPT

javascript中怎么高度

HTML代碼

body

div class="father" id="father"

h3這是父元素，屏幕分辨率是1366*768/h3

div class="son" id="son"

h3這是子元素，祝大家國慶快樂 /h3

div class="grandson" id="grandson"

h3這是孫子元素，祝大家國慶快樂 /h3

h3我的博客:;/h3

h3程序愛好者QQ群:/h3

h3259280570 /h3

h3歡迎你加入 /h3

h3國慶快樂 /h3

/div

/div

/div

div class="data"

h3數(shù)據(jù)輸出/h3

div id="data"/div

/div

/body

CSS代碼

*

{

margin: 0 auto;

}

.father

{

width: 500px;

height: 750px;

border: 5px solid red;

float: left;

}

.son

{

width: 400px;

height: 300px;

border: 5px solid black;

margin: 20px;

}

.grandson

{

width: 150px;

height: 100px;

border: 5px solid blue;

margin: 20px;

overflow: auto;

}

.data

{

width: 600px;

height: 750px;

border: 5px solid red;

float: left;

margin-left: 15px;

}

JS代碼

window.onload = function()

{

/*獲取元素對(duì)象*/

var father = document.getElementById('father');

var son = document.getElementById('son');

var grandson = document.getElementById('grandson');

var data = document.getElementById('data');

data.innerHTML = "h3獲取視窗大小(跟窗口大小有關(guān))/h3";

data.innerHTML += "document.body可見區(qū)域?qū)? "+document.body.clientWidth+"br/";

data.innerHTML += "document.body可見區(qū)域高: "+document.body.clientHeight+"br/";

data.innerHTML += "window.innerWidth可見區(qū)域?qū)? "+window.innerWidth+"br/";

data.innerHTML += "window.innerHeight可見區(qū)域高: "+window.innerHeight+"br/";

data.innerHTML += "document.documentElement可見區(qū)域?qū)? "+document.documentElement.clientWidth+"br/";

data.innerHTML += "document.documentElement可見區(qū)域高: "+document.documentElement.clientHeight+"br/";

data.innerHTML += "h3獲取元素自身大小(跟是否有滾動(dòng)條無關(guān))/h3";

data.innerHTML += ".son自身寬度(offsetWidth屬性，包括左右邊框)："+son.offsetWidth+"br/";

data.innerHTML += ".son自身高度(offsetHeight屬性，包括上下邊框)："+son.offsetHeight+"br/";

data.innerHTML += ".son可視寬度(clientWidth屬性，不包括左右邊框)："+son.clientWidth+"br/";

data.innerHTML += ".son可視高度(clientHeight屬性，不包括上下邊框)："+son.clientHeight+"br/";

data.innerHTML += "h3獲取.grandson滾動(dòng)大小和可視大小/h3";

data.innerHTML += ".grandson滾動(dòng)寬度(scrollWidth屬性)："+grandson.scrollWidth+"br/";

data.innerHTML += ".grandson滾動(dòng)高度(scrollHeight屬性)："+grandson.scrollHeight+"br/";

data.innerHTML += ".grandson可視寬度(clientWidth屬性，不包括豎直滾動(dòng)條和border)："+grandson.clientWidth+"br/";

data.innerHTML += ".grandson可視高度(clientHeight屬性，不包括水平滾動(dòng)條和border)："+grandson.clientHeight+"br/";

data.innerHTML += "h3獲取.grandson被卷去的大小(跟滾動(dòng)條的位置有關(guān))/h3";

data.innerHTML += ".grandson被卷去的高(scrollTop屬性，豎直滾動(dòng)條滑到最底端)："+grandson.scrollTop+"br/";

data.innerHTML += ".grandson被卷去的左(scrollLeft屬性，水平滾動(dòng)條滑到最右端)："+grandson.scrollLeft+"br/";

data.innerHTML += "h3獲取瀏覽器窗口位置(跟窗口大小有關(guān))/h3";

/*

*IE、Chrome、Safari、Opera 都提供了支持 window.screenLeft 和 *window.screenTop，但是Firxfox不支持這個(gè)兩個(gè)屬性；

*Firxfox、Chrome、Safari、Opera 都提供了支持 window.screenX *和 window.screenY，但是 IE 不支持這個(gè)兩個(gè)屬性；

*/

var leftPos = (typeof window.screenLeft == 'number')?window.screenLeft:window.screenX;

var topPos = (typeof window.screenTop == 'number')?window.screenTop:window.screenY;

data.innerHTML += "body網(wǎng)頁正文部分上(window.screenTop(Y))："+ topPos+"br/";

data.innerHTML += "body網(wǎng)頁正文部分左(window.screenLeft(X))："+ leftPos+"br/";

data.innerHTML += "h3獲取屏幕分辨率/h3";

data.innerHTML += "屏幕分辨率的高(window.screen.height)："+ window.screen.height+"br/";

data.innerHTML += "屏幕分辨率的寬(window.screen.width)："+ window.screen.width+"br/";

data.innerHTML += "h3獲取屏幕可用的高寬/h3";

data.innerHTML += "屏幕分辨率的高(window.screen.availHeight)："+ window.screen.availHeight+"br/";

data.innerHTML += "屏幕分辨率的寬(window.screen.availWidth)："+ window.screen.availWidth+"br/";

data.innerHTML += "h3獲取.father的邊框大小/h3";

data.innerHTML += ".father上邊框(clientTop)："+ father.clientTop+"br/";

data.innerHTML += ".father左邊框(clientLeft)："+ father.clientLeft+"br/";

data.innerHTML += "h3獲取.son到父元素邊界的距離(即對(duì)應(yīng)margin+父元素對(duì)應(yīng)的border)/h3";

data.innerHTML += ".son到父元素上邊界(offsetTop)："+ son.offsetTop+"br/";

data.innerHTML += ".son到父元素左邊界(offsetLeft)："+ son.offsetLeft+"br/";

}

javascript設(shè)置表格的寬度和高度

window.outerheight

窗口總高度

和window.screen.availheight一樣

window.innerheight

窗口可視區(qū)域高度

window.screen.height

顯示器屏幕高度

另外：jquery獲取高度

$(".thiscrumbs").height()

元素本身高度

$(".thiscrumbs").innerheight()

元素高度+內(nèi)邊距

$(".thiscrumbs").outerheight()

元素高度+內(nèi)邊距+邊框

$(".thiscrumbs").outerheight(true)

元素高度+內(nèi)邊距+邊框+外邊距

JavaScript獲取網(wǎng)頁、瀏覽器、屏幕高度和寬度匯總

經(jīng)常發(fā)現(xiàn)在寫JavaScript的時(shí)候，都需要用到網(wǎng)頁、瀏覽器或屏幕的高度和寬度來解決布局定位的問題，時(shí)常前用后忘，要不就是在網(wǎng)上search，干脆自己總結(jié)一下，這樣也方便再次使用，省時(shí)省力。

網(wǎng)頁可見區(qū)域?qū)挘篸ocument.body.clientWidth

網(wǎng)頁可見區(qū)域高：document.body.clientHeight

網(wǎng)頁可見區(qū)域?qū)挘篸ocument.body.offsetWidth

(包括邊線的寬)

網(wǎng)頁可見區(qū)域高：document.body.offsetHeight

(包括邊線的寬)

網(wǎng)頁正文全文寬：document.body.scrollWidth

（帶滾動(dòng)條寬）

網(wǎng)頁正文全文高：document.body.scrollHeight

（帶滾動(dòng)條高）

網(wǎng)頁被卷去的高：document.body.scrollTop

網(wǎng)頁被卷去的左：document.body.scrollLeft

網(wǎng)頁正文部分上：window.screenTop

網(wǎng)頁正文部分左：window.screenLeft

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

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

屏幕可用工作區(qū)高度：window.screen.availHeight

屏幕可用工作區(qū)寬度：window.screen.availWidth

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

scrollHeight:

獲取對(duì)象的滾動(dòng)高度。

scrollLeft:設(shè)置或獲取位于對(duì)象左邊界和窗口中目前可見內(nèi)容的最左端之間的距離

scrollTop:設(shè)置或獲取位于對(duì)象最頂端和窗口中可見內(nèi)容的最頂端之間的距離

scrollWidth:獲取對(duì)象的滾動(dòng)寬度

offsetHeight:獲取對(duì)象相對(duì)于版面或由父坐標(biāo)

offsetParent

屬性指定的父坐標(biāo)的高度

offsetLeft:獲取對(duì)象相對(duì)于版面或由

offsetParent

屬性指定的父坐標(biāo)的計(jì)算左側(cè)位置

offsetTop:獲取對(duì)象相對(duì)于版面或由

offsetTop

屬性指定的父坐標(biāo)的計(jì)算頂端位置

event.clientX

相對(duì)文檔的水平座標(biāo)

event.clientY

相對(duì)文檔的垂直座標(biāo)

event.offsetX

相對(duì)容器的水平坐標(biāo)

event.offsetY

相對(duì)容器的垂直坐標(biāo)

document.documentElement.scrollTop

垂直方向滾動(dòng)的值

event.clientX+document.documentElement.scrollTop

相對(duì)文檔的水平座標(biāo)+垂直方向滾動(dòng)的量

IE，F(xiàn)ireFox

差異如下：

IE6.0、FF1.06+：

復(fù)制代碼

代碼如下:

clientWidth

=

width

+

padding

clientHeight

=

height

+

padding

offsetWidth

=

width

+

padding

+

border

offsetHeight

=

height

+

padding

+

border

IE5.0/5.5：

復(fù)制代碼

代碼如下:

clientWidth

=

width

-

border

clientHeight

=

height

-

border

offsetWidth

=

width

offsetHeight

=

height

總結(jié)：關(guān)于高度和寬度的東西到是挺多的，具體的有些自己也沒有弄懂，通過自己試驗(yàn)了一下，有些得出的值是一樣，所以很讓人迷惑，只能視情況而定了。