offsetTop
取得物件相對於版面或由offsetParent 屬性指定的父座標的計算頂端位置。
offsetLeft
取得物件相對於版面或由offsetParent 屬性指定的父座標的計算左側位置。
offsetHeight
取得物件相對於版面或由父座標offsetParent 屬性指定的父座標的高度。
IE、Opera 認為offsetHeight = clientHeight + 捲軸+ 邊框。
NS、FF 認為offsetHeight 是網頁內容實際高度,可以小於clientHeight。
offsetWidth
取得物件相對於版面或由父座標offsetParent 屬性指定的父座標的寬度。
offsetParent
取得定義物件offsetTop 和offsetLeft 屬性的容器物件的參考。
clientHeight
取得物件的高度,不計算任何邊距、邊框、捲軸或可能套用到該物件的補白。
大家對clientHeight 都沒有什麼異議,都認為是內容視覺區域的高度,也就是說頁面瀏覽器中可以看到內容的這個區域的高度,一般是最後一個工具條以下到狀態列以上的這個區域,與頁面內容無關。
clientLeft
取得offsetLeft 屬性和客戶區域的實際左邊之間的距離。
clientTop
取得offsetTop 屬性和客戶區域的實際頂端之間的距離。
clientWidth
取得物件的寬度,不計算任何邊距、邊框、捲軸或可能套用到該物件的補白。
SCROLL屬性
scroll
設定或取得捲動是否關閉。
scrollHeight
取得對象的滾動高度。
scrollLeft
設定或取得位於物件左邊界和視窗中目前可見內容的最左端之間的距離。
scrollTop
設定或取得位於物件最頂端和視窗中可見內容的最頂端之間的距離。
scrollWidth
取得對象的滾動寬度。 event屬性
x
設定或取得滑鼠指標位置相對於父文件的x 像素座標。
screenX
設定或取得取得滑鼠指標位置相對於使用者螢幕的x 座標
offsetX
設定或取得滑鼠指標位置相對於觸發事件的物件的x 座標。
clientX
設定或取得滑鼠指標位置相對於視窗客戶區域的x 座標,其中客戶區域不包括視窗本身的控制項和捲軸
我們在這裡說說四種瀏覽器對document.body 的clientHeight、offsetHeight 和scrollHeight 的解釋,這裡說的是document.body,如果是HTML 控件,則又有不同。
這四種瀏覽器分別為IE(Internet Explorer)、NS(Netscape)、Opera、FF(FireFox)。
clientHeight
大家對clientHeight 都沒有什麼異議,都認為是內容視覺區域的高度,也就是說頁面瀏覽器中可以看到內容的這個區域的高度,一般是最後一個工具條以下到狀態列以上的這個區域,與頁面內容無關。
offsetHeight
IE、Opera 認為offsetHeight = clientHeight + 捲軸+ 邊框。 NS、FF 認為offsetHeight 是網頁內容實際高度,可以小於clientHeight。
scrollHeight
IE、Opera 認為scrollHeight 是網頁內容實際高度,可以小於clientHeight。 NS、FF 認為scrollHeight 是網頁內容高度,不過最小值是clientHeight。 簡單地說
clientHeight 就是透過瀏覽器看內容的這個區域高度。
NS、FF 認為offsetHeight 和scrollHeight 都是網頁內容高度,只不過當網頁內容高度小於等於clientHeight 時,scrollHeight 的值是clientHeight,而offsetHeight 可以小於clientHeight。
IE、Opera 認為offsetHeight 是視覺區域clientHeight 捲軸加邊框。 scrollHeight 是網頁內容實際高度。
同理
clientWidth、offsetWidth 和scrollWidth 的解釋與上方相同,只是把高度換成寬度即可。
但是
FF 在不同的DOCTYPE 中對clientHeight 的解釋不同, xhtml 1 trasitional 中則不是如上解釋的。其它瀏覽器則不存在此問題。
js取得頁面高度
複製代碼代碼如下:
<script>
function getInfo()
{
var s = "";
s += " 網頁可見區域寬:"+ document.body.clientWidth;
s += " 網頁可見區域高:"+ document.body.clientHeight;
s += " 網頁可見區域寬:"+ document.body.offsetWidth + " (包括邊線和捲軸的寬)";
s += " 網頁可見區域高:"+ document.body.offsetHeight + " (包括邊線的寬)";
s += " 網頁內文全文寬:"+ document.body.scrollWidth;
s += " 網頁內文全文高:"+ document.body.scrollHeight;
s += " 網頁被捲去的高(ff):"+ document.body.scrollTop;
s += " 網頁被捲去的高(ie):"+ document.documentElement.scrollTop;
s += " 網頁被捲去的左:"+ document.body.scrollLeft;
s += " 網頁正文部分上:"+ window.screenTop;
s += " 網頁正文部分左:"+ window.screenLeft;
s += " 螢幕解析度的高:"+ window.screen.height;
s += " 螢幕解析度的寬:"+ window.screen.width;
s += " 螢幕可用工作區高度:"+ window.screen.availHeight;
s += " 螢幕可用工作區寬度:"+ window.screen.availWidth;
s += " 你的螢幕設定是"+ window.screen.colorDepth +" 位元彩色";
s += " 你的螢幕設定"+ window.screen.deviceXDPI +" 像素/英吋";
//alert (s);
}
getInfo();
</script>
在我本地測試當中:
在IE、FireFox、Opera下都可以使用
document.body.clientWidth
document.body.clientHeight
即可獲得,很簡單,很方便。
而在公司專案當中:
Opera仍然使用
document.body.clientWidth
document.body.clientHeight
可是IE和FireFox則使用
document.documentElement.clientWidth
document.documentElement.clientHeight
原來是W3C的標準在作怪啊
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
如果在頁面中加入這行標記的話
在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高)
真是一件麻煩事情,其實就開發來看,寧可少一些物件和方法,不使用最新的標準要方便許多啊。