首頁 > 開發者 > JavaScript
在新定義出來的標準下 document.documentElement.clientHeight在IE和Firefox裡都能擷取正確值，下面一篇文章詳細介紹了擷取各種瀏覽器可見視窗大小這方面的差別：
<script language="javascript">
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
<!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高）
用 javascript 擷取當頁面上滑鼠（游標）位置在許多情況下都會用到，比如拖放，懸停提示（tooltip） 等等。當然，這裡我們依然要面對瀏覽器的相容問題，在不同的瀏覽器下，對這些相關的屬性處理方式也不同，本文詳細介紹了瀏覽器在處理這些屬性時的差異和最終的解決方案。
上面的代碼我們在 怎麼用 javascript 實現拖拽 中已經介紹過了，由於這個需求我們經常用到，所以我們將這段代碼獨立成一篇文章，供新手查詢。
使用方式：
Code:
document.onmousemove = mouseMove;
function mouseMove(ev){
ev = ev || window.event;
var mousePos = mousePosition(ev);
}
關於代碼的詳細說明，原文中已經介紹，現轉到此處：
我們首先要聲明一個 evnet 對象，無論移動、點擊、按鍵等，都會啟用一個 evnet ，在 Internet Explorer 裡， event 是全域變數，會被儲存在 window.event 裡． 在 firefox 或者其他瀏覽器，event 會被相應的函數擷取．當我們將mouseMove函數賦值於document.onmousemove，mouseMove 會擷取滑鼠移動事件。
為了讓 ev 在所有瀏覽器下擷取了 event 事件，在Firefox下"||window.event"將不起作用，因為ev已經有了賦值。在 MSIE 中 ev 為空白，所以得到 window.event 。
因為在這篇文章中我們需要多次擷取滑鼠位置，所以我們設計了一個 mousePosition 函數，它包含一個參數 ： event 。
因為我們要在 MSIE 和其他瀏覽器下運行，Firefox 和其他瀏覽器用 event.pageX 和 event.pageY 來表示滑鼠相對於文檔的位置，如果你有一個 500*500 的視窗並且你的滑鼠在絕對中間，那麼 pageX 和 pageY 的值都是 250，如果你向下滾動 500， 那麼 pageY 將變成 750。
MSIE 正好相反，它使用 event.clientX 和 event.clientY 表示滑鼠相當於視窗的位置，而不是文檔。在同樣的例子中，如果你向下滾動500，clientY 依然是 250，因此，我們需要添加 scrollLeft 和 scrollTop 這兩個相對於文檔的屬性。最後，MSIE 中文檔並不是從 0，0 開始，而是通常有一個小的邊框（通常是 2 象素），邊框的大小定義在 document.body.clientLeft 和 clientTop 中，我們也把這些加進去。
js與jquery獲得頁面大小、捲軸位置、元素位置
//頁面位置及視窗大小
function GetPageSize() {
var scrW, scrH;
if(window.innerHeight && window.scrollMaxY)
{ // Mozilla
scrW = window.innerWidth + window.scrollMaxX;
scrH = window.innerHeight + window.scrollMaxY;
}
else if(document.body.scrollHeight > document.body.offsetHeight)
{ // all but IE Mac
scrW = document.body.scrollWidth;
scrH = document.body.scrollHeight;
} else if(document.body)
{ // IE Mac
scrW = document.body.offsetWidth;
scrH = document.body.offsetHeight;
}
var winW, winH;
if(window.innerHeight)
{ // all except IE
winW = window.innerWidth;
winH = window.innerHeight;
} else if (document.documentElement && document.documentElement.clientHeight)
{ // IE 6 Strict Mode
winW = document.documentElement.clientWidth;
winH = document.documentElement.clientHeight;
} else if (document.body) { // other
winW = document.body.clientWidth;
winH = document.body.clientHeight;
} // for small pages with total size less then the viewport
var pageW = (scrW<winW) ? winW : scrW;
var pageH = (scrH<winH) ? winH : scrH;
return {PageW:pageW, PageH:pageH, WinW:winW, WinH:winH};
};
//捲軸位置
function GetPageScroll()
{
var x, y; if(window.pageYOffset)
{ // all except IE
y = window.pageYOffset;
x = window.pageXOffset;
} else if(document.documentElement && document.documentElement.scrollTop)
{ // IE 6 Strict
y = document.documentElement.scrollTop;
x = document.documentElement.scrollLeft;
} else if(document.body) { // all other IE
y = document.body.scrollTop;
x = document.body.scrollLeft;
}
return {X:x, Y:y};
}
jquery
擷取瀏覽器顯示地區的高度 ： $(window).height();
擷取瀏覽器顯示地區的寬度 ：$(window).width();
擷取頁面的文檔高度 ：$(document).height();
擷取頁面的文檔寬度 ：$(document).width();
擷取捲軸到頂部的垂直高度 ：$(document).scrollTop();
擷取捲軸到左邊的垂直寬度 ：$(document).scrollLeft();
計算元素位置和位移量
offset方法是一個很有用的方法，它返回封裝集中第一個元素的位移資訊。預設情況下是相對body的位移資訊。結果包含 top和left兩個屬性。
offset(options, results)
options.relativeTo 指定相對計 算位移位置的祖先元素。這個元素應該是relative或absolute定位。省略則相對body。
options.scroll 是否把 捲軸計算在內，預設TRUE
options.padding 是否把padding計算在內，預設false
options.margin 是否把margin計算在內，預設true
options.border 是否把邊框計算在內，預設true本文出自:http://www.cnblogs.com/b400800/archive/2012/12/14/2818398.html
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
