首頁>網頁設計教程>Javascript教程

JavaScript中獲取高度和寬度函數總結

作者：Eve Cole 更新時間：2025-04-14 17:48:02

html代碼：

複製代碼代碼如下:

<body>

<div id="father">

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

<div id="son">

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

<div id="grandson">

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

<h3>我的博客:www.VeVB.COm</h3>

<h3>程序愛好者QQ群:</h3>

<h3>259280570 </h3>

<h3>歡迎你加入</h3>

<h3>國慶快樂</h3>

</div>

</div>

</div>

<div>

<h3>數據輸出</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()

{

/*獲取元素對象*/

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

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

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

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

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

data.innerHTML += "document.body可見區域寬: "+document.body.clientWidth+"<br/>";

data.innerHTML += "document.body可見區域高: "+document.body.clientHeight+"<br/>";

data.innerHTML += "window.innerWidth可見區域寬: "+window.innerWidth+"<br/>";

data.innerHTML += "window.innerHeight可見區域高: "+window.innerHeight+"<br/>";

data.innerHTML += "document.documentElement可見區域寬: "+document.documentElement.clientWidth+"<br/>";

data.innerHTML += "document.documentElement可見區域高: "+document.documentElement.clientHeight+"<br/>";

data.innerHTML += "<h3>獲取元素自身大小(跟是否有滾動條無關)</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滾動大小和可視大小</h3>";

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

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

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

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

data.innerHTML += "<h3>獲取.grandson被捲去的大小(跟滾動條的位置有關)</h3>";

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

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

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

/*

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

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

*/

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

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

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

data.innerHTML += "body網頁正文部分左(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到父元素邊界的距離(即對應margin+父元素對應的border)</h3>";

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

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

}

ps：瀏覽器對盒子的解析存在差異，所以以上得出的數據也會存在小小差異。附圖一張。

完整代碼：

 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd"><html> <head> <meta charset="utf-8" /> <title>test</title> <style type="text/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;}</style><script type="text/javascript">window.onload = function(){/*獲取元素對象*/var father = document.getElementById('father');var son = document.getElementById('son');var grandson = document.getElementById('grandson');var data = document.getElementById('data');data.innerHTML = "<h3>獲取視窗大小(跟窗口大小有關)</h3>";data.innerHTML += "document.body可見區域寬: "+document.body.clientWidth+"<br/>";data.innerHTML += "document.body可見區域高: "+document.body.clientHeight+"<br/>";data.innerHTML += "window.innerWidth可見區域寬: "+window.innerWidth+"<br/>";data.innerHTML += "window.innerHeight可見區域高: "+window.innerHeight+"<br/>";data.innerHTML += "document.documentElement可見區域寬: "+document.documentElement.clientWidth+"<br/>";data.innerHTML += "document.documentElement可見區域高: "+document.documentElement.clientHeight+"<br/>";data.innerHTML += "<h3>獲取元素自身大小(跟是否有滾動條無關)</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滾動大小和可視大小</h3>";data.innerHTML += ".grandson滾動寬度(scrollWidth屬性)："+grandson.scrollWidth+"<br/>";data.innerHTML += ".grandson滾動高度(scrollHeight屬性)："+grandson.scrollHeight+"<br/>";data.innerHTML += ".grandson可視寬度(clientWidth屬性，不包括豎直滾動條和border)："+grandson.clientWidth+"<br/>";data.innerHTML += ".grandson可視高度(clientHeight屬性，不包括水平滾動條和border)："+grandson.clientHeight+"<br/>";data.innerHTML += "<h3>獲取.grandson被捲去的大小(跟滾動條的位置有關)</h3>";data.innerHTML += ".grandson被捲去的高(scrollTop屬性，豎直滾動條滑到最底端)："+grandson.scrollTop+"<br/>";data.innerHTML += ".grandson被捲去的左(scrollLeft屬性，水平滾動條滑到最右端)："+grandson.scrollLeft+"<br/>";data.innerHTML += "<h3>獲取瀏覽器窗口位置(跟窗口大小有關)</h3>";/**IE、Chrome、Safari、Opera 都提供了支持window.screenLeft 和*window.screenTop，但是Firxfox不支持這個兩個屬性；*Firxfox、Chrome、Safari、Opera 都提供了支持window.screenX *和window.screenY，但是IE 不支持這個兩個屬性；*/var leftPos = (typeof window.screenLeft == 'number')?window.screenLeft:window.screenX;var topPos = (typeof window.screenTop == 'number')?window.screenTop:window.screenY;data.innerHTML += "body網頁正文部分上(window.screenTop(Y))："+ topPos+"<br/>";data.innerHTML += "body網頁正文部分左(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到父元素邊界的距離(即對應margin+父元素對應的border)</h3>";data.innerHTML += ".son到父元素上邊界(offsetTop)："+ son.offsetTop+"<br/>";data.innerHTML += ".son到父元素左邊界(offsetLeft)："+ son.offsetLeft+"<br/>";}</script></head> <body> <div id="father"><h3>這是父元素，屏幕分辨率是1366*768</h3><div id="son"><h3>這是子元素，祝大家國慶快樂</h3><div id="grandson"><h3>這是孫子元素，祝大家國慶快樂</h3><h3>我的博客:www.VeVB.COm</h3><h3>程序愛好者QQ群:</h3><h3>259280570 </h3><h3>歡迎你加入</h3><h3>國慶快樂</h3></div></div></div><div><h3>數據輸出</h3><div id="data"></div></div></body> </html>
相關文章