探索javascript----事件對象下的各類X和Y

每次用到諸如client，screen，offset等，雖然一般都是能用對的，可是總以爲不是那麼的自信沒錯。因此整理一下能夠再須要的時候來查閱。

一：clientX和clientY,screenX和screenY:

可見：正如字面所講，screen是鼠標相對屏幕座標，但screenY取不到客戶區之外的值，而client是相對於客戶區的。

二：頁面座標位置(page)：pageX和pageY:

 

注：此圖滾動條沒有畫出；

pageX和pageY是相對於文檔流的，包含scroll值，因此，在第一屏下，和clientX和clientY沒有差異；

此圖的div是一個絕對定位的區塊。此時layerX和layerY是相對於黃色區塊的。

三：偏移量(offset):　offsetWidth,offsetHeight,offsetTop,offsetLeft:　

元素的偏移量是根據它的直接父元素來定義的。

區塊大小offset(Width/Height)=padding+content+border+scroll也就是offset=client+border+scroll;(content爲元素內部實際可用區域)

因此不包含margin（一個區塊加了背景並不會涉及margin部分）

圖引用於http://www.cnblogs.com/skylar/p/4121508.html

一種獲取在頁面中偏移量的方法：

var getOffset = {
            top: function (obj) {
                return obj.offsetTop + (obj.offsetParent ? arguments.callee(obj.offsetParent) : 0)
            },//遞歸，一層一層往上累加offsetTop
            left: function (obj) {
                return obj.offsetLeft + (obj.offsetParent ? arguments.callee(obj.offsetParent) : 0)
            }
        };

偏移量是隻讀的，每次訪問都會從新計算，注意性能問題。

四：客戶區(client)大小：

　　client=padding+content,不包含滾動條的寬高　(而，offset=padding+content+border+scroll，也就是offset=client+border+scroll)  ,記憶：client就是兩部分組成的，padding和content;offset由四部分組成，不含margin。=>不管誰在算w或h時都不關margin鳥事。

五：滾動大小（scroll）:scrollWidth,scrollHeight,scrollTop,scrollLeft:

「有些元素沒有執行任何代碼也能夠自動添加滾動條，如HTML;而有些元素須要添加overflow：scroll纔能有滾動條」。

　　可認爲html元素是在瀏覽客戶區裏滾動的元素（ie6以前版本怪異模式下是body,因此計算客戶區寬纔有：document.documentElement.clientWidth||document.body.clientWidth）

帶有滾動條的頁面總高度是：document.documentElement.scrollHeight||document.body.scrollHeight;　

　　　圖引用於http://www.cnblogs.com/skylar/p/4121508.html

注：在肯定文檔總高度時，通常取scrollHeight應該取scrollHeight和clientHeight的最大值，以確保兼容性。

八：未完待續

*:對於function getStyle(){

　　            return obj.currentStyle ? obj.currentStyle[attr] : window.getComputedStyle(obj, null)[attr];

}

只要元素css有left和top，ff、chrome、ie都能得到準確字符類型的數值，該數值就只是css裏寫的。

若是css只設定了position值，沒有指明明left和top多少，：ff下獲取對應屬性值的left和top值，沒有指明left和top就是"0px"，而chorme和ie顯示auto；