整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
次分清clientHeight、offsetHeight、scrollHeight、scrollTop、offsetTop概念：
clientHeight：可視的，看得見的部分，content+padding；
offsetHeight：在clientHeight基礎上，添加“”邊框“”，即content+padding+margin；
scrollTop：超過clientHeight“頂部界線”的部分，即看不見的、已經 滾動出去 的部分；
scrollHeight：“內容”的本身高度；
offsetTop：這個是唯一研究 兩個元素之間 關系的，子元素與父元素頂部距離；
TML標簽
基本標簽
HTML頁面中內容是由HTML標簽組織起來的，如頁面中的文本、圖像、Flash視頻文件等都是通過HTML標簽合理地顯示在頁面的各個位置。
1 標題標簽<h1>～<h6>
標題標簽表示一段文字的標題（主題），并且支持多層次的內容結構。HTNL.共提供了6級標題，分別為<h1>～<h6>，并賦予了標題一定的外觀，所有標題字體加粗，其中山<h1>字號最大，<h6>字號最小.
2.圖像標簽<img>
在網頁中常用的圖像格式有4種，即JPG、GIF、BMP.PNG，其中使用比較多的是JPG、GIF和PNG，大多數瀏覽器都可以顯示這些圖像。
顯示圖像的語法：
< img src="ur1" alt="文本" width="x" height="y"/>
在語法中：
a、SrC屬性：表示顯示圖像的地址。
b、alt屬性：指定圖像的替代文本，當圖像無法顯示時（如圖片路徑錯誤或網速太慢等）替代顯示的文本，這樣，即使圖像無法顯示，用戶還可以看到網頁丟失的信息，所以為頁面上的圖像都加上替換文本屬性是個好習慣，這樣有助于更好地顯示信息，并且對于那些使用純文本瀏覽器的人來說是非常有幫助的。
c、width屬性：表示圖像寬度.
d、height屬性：表示圖像高度。
3.段落標簽<p>
顧名思義，段落標簽表示將一段文字組成一系列段落內容，這樣做的目的是內容應用某些格式和布局，使各個段落的邏輯更清晰明了。在HTML文檔中，段落通過<p>標簽定義。段落標簽<p>表示段落的開始，</p >表示段落的結束。
4.換行標簽<br/>
在希望不產生一個新段落的情況下進行換行，則使用<br>標簽。<br>是一個空的HTML標簽，由于關閉標簽沒有任何意義，因此它沒有結束標簽。
注意：
使用<b>和<br>的結果一樣，在XHTML以及未來的HTML版本中，根據W3C規范，不允許使用沒有結束標簽的HTML元素，因此使用<br>頁面更規范，有更長遠的保障。
5.水平線標簽<hr/>
水平線標簽表示一條水平線，注意該標簽與<br>標簽一樣，沒有結束標簽，直接使用<hr/>表示標簽的開始和結束。
使用以上講解的基本標簽，就可以進行網頁內容排版了。
頁可見區域寬：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 相對文檔的水平座標+垂直方向滾動的量
IE，FireFox 差異如下：
IE6.0、FF1.06+：
clientWidth = width + padding
clientHeight = height + padding
offsetWidth = width + padding + border
offsetHeight = height + padding + border
IE5.0/5.5：
clientWidth = width - border
clientHeight = height - border
offsetWidth = width
offsetHeight = height
(需要提一下：CSS中的margin屬性，與clientWidth、offsetWidth、clientHeight、offsetHeight均無關)
網頁可見區域寬： 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
－－－－－－－－－－－－－－－－－－－
技術要點
本節代碼主要使用了Document對象關于窗口的一些屬性，這些屬性的主要功能和用法如下。
要得到窗口的尺寸，對于不同的瀏覽器，需要使用不同的屬性和方法：若要檢測窗口的真實尺寸，在Netscape下需要使用Window的屬性；在IE下需要 深入Document內部對body進行檢測；在DOM環境下，若要得到窗口的尺寸，需要注意根元素的尺寸，而不是元素。
Window對象的innerWidth屬性包含當前窗口的內部寬度。Window對象的innerHeight屬性包含當前窗口的內部高度。
Document對象的body屬性對應HTML文檔的標簽。Document對象的documentElement屬性則表示HTML文檔的根節點。
document.body.clientHeight表示HTML文檔所在窗口的當前高度。document.body. clientWidth表示HTML文檔所在窗口的當前寬度。
實現代碼
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>請調整瀏覽器窗口</title>
<meta http-equiv="content-type" content="text/html; charset=gb2312">
</head>
<body>
<h2 align="center">請調整瀏覽器窗口大小</h2><hr>
<form action="#" method="get" name="form1" id="form1">
<!--顯示瀏覽器窗口的實際尺寸-->
瀏覽器窗口 的 實際高度: <input type="text" name="availHeight" size="4"><br>
瀏覽器窗口 的 實際寬度: <input type="text" name="availWidth" size="4"><br>
</form>
<script type="text/javascript">
<!--
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;
//-->
</script>
</body>
</html>
源程序解讀
（1）程序首先建立一個表單，包含兩個文本框，用于顯示窗口當前的寬度和高度，并且，其數值會隨窗口大小的改變而變化。
（2）在隨后的JavaScript代碼中，首先定義了兩個變量winWidth和winHeight，用于保存窗口的高度值和寬度值。
（3）然后，在函數findDimensions ( )中，使用window.innerHeight和window.innerWidth得到窗口的高度和寬度，并將二者保存在前述兩個變量中。
（4）再通過深入Document內部對body進行檢測，獲取窗口大小，并存儲在前述兩個變量中。
（5）在函數的最后，通過按名稱訪問表單元素，結果輸出至兩個文本框。
（6）在JavaScript代碼的最后，通過調用findDimensions ( )函數，完成整個操作。
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
