文檔和元素的幾何圖形

基礎知識

• 獲取滾動條的位置， window.pageXOffset|pageYOffset/documentElement.scrollLeft|scrollTop/body.scrollLeft|scrollTop;
• 獲取窗口大小, window.innerWidth|innerHeight/document.clientWidth|clientHeight/body.clientWidth|clientHeight
•  獲取元素的大小 getBoundingClientRect(left, top, right, bottom, width|height(少部份瀏覽器沒有))
• 文檔位置= 窗口大小 + 滾動條位置
•  offsetWidth: content + padding + border
• clientWidth: content + padding
• scrollWidth: content + padding + 溢出的內容
• offsetTop: 文檔座標，或者相對於父元素的座標(擁有position)
• clientTop: border外邊緣與padding外側的距離，通常是borderTop的寬度，一般不使用
• scrollTop: scrollBar的位置
• offsetParent: offsetTop所相對的父元素，如果爲null則表示的是文檔
  

  function getScrollOffsets(w){
            var w = w || window;
            if(w.pageXOffset != null) return {x: w.pageXOffset, y: w.pageYOffset};
            var d = w.document;
            if(document.compatMode == "CSS1Compat"){
                return {x: d.documentElement.scrollLeft, y: d.documentElement.scrollTop};
            }
            return {x: d.body.scrollLeft, y: d.body.scrollTop};

        }
        function getViewportSize(w){
            var w = w || window;
            if(w.innerWidth != null) return {w: w.innerWidth, h: w.innerHeight};
            var d = w.document;
            if(document.compatMode == "CSS1Compat"){
                return {w: d.documentElement.clientWidth, h: d.documentElement.clientHeight};
            }
            return {w: d.body.clientWidth, h: d.body.clientHeight};

        }
        function size(e){
            var box = e.getBoundingClientRect();
            return {w: box.width || box.right - box.left, h: box.height || box.bottom - box.top};
        }
        function getElementPos(elt){  // == getBoundingClientRect();
            var x = 0, y = 0;
            for(var e = elt; e != null; e = e.offsetParent){
                x += e.offsetLeft;
                y += e.offsetTop;
            }
            for(var e = elt.parentNode; e != null && e.nodeType == 1; e = e.parentNode){
                x -= e.scrollLeft;
                y -= e.scrollTop;
            }
        }

獲得元素的padding, border, margin

以padding 舉例，要想獲得一個元素的padding尺寸，需要經過以下幾個步驟

1. 通過getComputedStyle 或 者 currentStyle(ie) 獲得元素的計算樣式
2. 對於IE瀏覽器，樣式單位可能是相對單位, 如 2em，需要轉變爲 px 單位，基本方法是設定element.style.left = 2em; 然後通過 element.style.pixelLeft獲得決對值. (當然在實施的過程需要恢復 style的值。 詳細可以查看dojo-style.js 的 toPixel方法
3. 獲取相應的值，paddingLeft, paddingRight等(詳細方法在 dom-geometry.js

geom.getBorderExtents = function getBorderExtents(/*DomNode*/ node, /*Object*/ computedStyle){  
		node = dom.byId(node);
		var px = style.toPixelValue, s = computedStyle || style.getComputedStyle(node),
			l = s.borderLeftStyle != none ? px(node, s.borderLeftWidth) : 0,//如果沒有指定border樣式，如solid, dotted。 主要是在IE中，currentStyle得到 1px #f00; 它不計算樣式
			t = s.borderTopStyle != none ? px(node, s.borderTopWidth) : 0,
			r = s.borderRightStyle != none ? px(node, s.borderRightWidth) : 0,
			b = s.borderBottomStyle != none ? px(node, s.borderBottomWidth) : 0;
		return {l: l, t: t, r: r, b: b, w: l + r, h: t + b};
	};