淘寶店
摘注】：以下說法不準確，不是有沒有DOCTYPE聲明，而是不同的DOCTYPE聲明對js的處理有影響。
在沒有DOCTYPE聲明的情況下:
document.body.clientWidth
document.body.clientHeight
為當前窗口的寬度/高度;
在DOCTYPE聲明以後
document.body.clientWidth
document.body.clientHeight
為整個頁麵的寬度/高度;
document.documentElement.clientWidth
document.documentElement.clientHeight
為當前窗口的寬度/高度;
同樣增加DOCTYPE聲明後
document.body.scrollLeft
document.body.scrollTop
要改為
document.documentElement.scrollLeft
document.documentElement.scrollTop
注意保存時，文件的編碼要看好，有時會出現腳本錯誤，是因為編碼的格式問題，如GB2312
------------------------------------------------------------------
在設計頁麵時可能經常會用到固定層的位置，這就需要獲取一些html對象的坐標以更靈活的設置目標層的坐標，這裏可能就會用到document.body.scrollTop等屬性，但是此屬性在xhtml標準網頁或者更簡單的說是帶<!DOCTYPE ..>標簽的頁麵裏得到的結果是0，如果不要此標簽則一切正常，那麼在xhtml頁麵怎麼獲得body的坐標呢，當然有辦法-使用document.documentElement來取代document.body,可以這樣寫
例：
var top = document.documentElement.scrollTop || document.body.scrollTop;
在javascript裏||是個好東西，除了能用在if等條件判斷裏，還能用在變量賦值上。那麼上例等同於下例。
例：
var top = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop;
這麼寫可以得到很好的兼容性。
---------------------------------------------------
JS獲取瀏覽器窗口巨細 獲取屏幕，瀏覽器，網頁高度寬度
網頁可見區域寬：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文檔所在窗口確當前寬度。
實現源代碼
<!------------------------------文件名：30.3.htm------------------------------><!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 ( )函數，完成整個操縱。
本文來源於芭奇設計站 http://www.bakii.cn/
什麼是DOCTYPE
DOCTYPE是document type(文檔類型)的簡寫，用來說明你用的XHTML或者HTML是什麼版本。其中的DTD(例如上例中的xhtml1-transitional.dtd)叫文檔類型定義，裏麵包含了文檔的規則，瀏覽器就根據你定義的DTD來解釋你頁麵的標識，並展現出來。
要建立符合標準的網頁，DOCTYPE聲明是必不可少的關鍵組成部分；除非你的XHTML確定了一個正確的DOCTYPE，否則你的標識和CSS都不會生效。
XHTML 1.0 提供了三種DTD聲明可供選擇：
過渡的(Transitional):要求非常寬鬆的DTD，它允許你繼續使用HTML4.01的標識(但是要符合xhtml的寫法)。完整代碼如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
嚴格的(Strict):要求嚴格的DTD，你不能使用任何表現層的標識和屬性，例如<br>。完整代碼如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
框架的(Frameset):專門針對框架頁麵設計使用的DTD，如果你的頁麵中包含有框架，需要采用這種DTD。完整代碼如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
我們選擇什麼樣的DOCTYPE
理想情況當然是嚴格的DTD，但對於我們大多數剛接觸web標準的設計師來說，過渡的DTD(XHTML 1.0 Transitional)是目前理想選擇(包括本站，使用的也是過渡型DTD)。因為這種DTD還允許我們使用表現層的標識、元素和屬性，也比較容易通過W3C的代碼校驗。
注：上麵說的"表現層的標識、屬性"是指那些純粹用來控製表現的tag，例如用於排版的表格、背景顏色標識等。在XHTML中標識是用來表示結構的，而不是用來實現表現形式，我們過渡的目的是最終實現數據和表現相分離。
打個比方：人體模特換衣服。模特就好比數據，衣服則是表現形式，模特和衣服是分離的，這樣你就可以隨意換衣服。而原來HTML4中，數據和表現是混雜在一起的，要一次性換個表現形式非常困難。嗬嗬，有點抽象了，這個概念需要我們在應用過程中逐步領會
DOCTYPE對CSS及JS的影響
也許你已經發現選用或不用DOCTYPE對你的頁麵的影響是非常大的，甚至對於不同瀏覽器結果也不一樣。下文以對一段javascript的影響說明：
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>divTest</title>
<script>
function changeHeight()
{
document.getElementById("content").style.height="360";
alert(document.getElementById("content").style.height);
alert(document.getElementById("content").offsetHeight);
}
</script>
</head>
<body>
<div id="content" style="height: 60px; border: 1px solid #FF0000;"><a href="javascript:changeHeight()">aa</a></div>
</body>
上文頁麵是通過按aa超鏈接表現javascript控製div的高度，讀者可以自己試一下
1. IE瀏覽（我用的是IE 6），content的高度會變大，同時alert出height:360，offsetHeight:362
2. firefox，content的高度不會變，同時alert出height:60，offsetHeight:62
3. 去掉最上麵的一句<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
在firefox下將得到content的高度會變大，同時alert出height:360，offsetHeight:362
我曾看到好多人運行到這裏就會得到一個結論去他的DOCTYPE，用了它好多東西都不對了。我以為不是這樣的，DOCTYPE定義了一個規範集，去檢驗你代碼的正確性規範性，去掉了DOCTYPE也許隻會在你當前機器上的瀏覽器正確運行，也就是說你的程序不能做到通用，難道這是你追求的嗎？這時你會說那上麵的問題怎麼辦呢，難道在firefox就不能那麼做嗎？回答是當然可以，仔細看一下上麵的代碼其實是有問題的，在<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">標準中對象的高度、大小必須指定單位的如px,pt等，如果不指定那就要依賴於應用瀏覽器的默認或支持情況了，因此修改代碼如下：
<script>
function changeHeight()
{
document.getElementById("content").style.height="360px";
alert(document.getElementById("content").style.height);
alert(document.getElementById("content").offsetHeight);
}
</script>
運行一下看看是不是對了呢？ 定義DOCTYPE是個好習慣，也希望大家能寫出標準規範的代碼。
