获取元素的页面位置，兼容各浏览器
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html /** *获取页面元素的滚动位置 @param {DOM} el Dom元素 *return {Object} 元素滚动位置对象 */ function getScroll (el) { var d = el, doc = document, body = doc.body, docElement = doc.documentElement, l, t, ret, isStrict = document.compatMode == "CSS1Compat", isIE = /msie/.test(navigator.userAgent); if (d == doc || d == body) { if (isIE && isStrict) { l = docElement.scrollLeft; t = docElement.scrollTop; } else { l = window.pageXOffset; t = window.pageYOffset; } ret = { left: l || (body ? body.scrollLeft : 0), top: t || (body ? body.scrollTop : 0) }; } else { ret = { left: d.scrollLeft, top: d.scrollTop }; } return ret; } /** *获取页面元素的位置 @param {DOM} el Dom元素 *return {Object} 元素位置对象 */ function getXY (el) { var doc = document, bd = doc.body, docEl = doc.documentElement, leftBorder = 0, topBorder = 0, ret = [0, 0], round = Math.round, box, scroll, isIE = /msie/.test(navigator.userAgent); if (el != doc && el != bd) { if (isIE) { try { box = el.getBoundingClientRect(); // 在ie8之前版本, documentElement 元素会有两像素的边框, 所以要减去它 topBorder = docEl.clientTop || bd.clientTop; leftBorder = docEl.clientLeft || bd.clientLeft; } catch (ex) { box = { left: 0, top: 0 }; } } else { box = el.getBoundingClientRect(); } scroll = getScroll(document); ret = [round(box.left + scroll.left - leftBorder), round(box.top + scroll.top - topBorder)]; } return ret; } var div = document.getElementById("test"); var sc = getXY(div); console.log(sc); </script></body></html>TAG:
