文档和元素的几何图形

基础知识

• 获取滚动条的位置， 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};
	};