基础知识
- 获取滚动条的位置, 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尺寸,需要经过以下几个步骤
- 通过getComputedStyle 或 者 currentStyle(ie) 获得元素的计算样式
- 对于IE浏览器,样式单位可能是相对单位, 如 2em,需要转变为 px 单位,基本方法是设定element.style.left = 2em; 然后通过 element.style.pixelLeft获得决对值. (当然在实施的过程需要恢复 style的值。 详细可以查看dojo-style.js 的 toPixel方法
- 获取相应的值,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};
};