首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > Web前端 >

获取元素的精确座标

2012-09-12 
获取元素的精确坐标var getCoords function(el){var box el.getBoundingClientRect(),doc elem.owne

获取元素的精确坐标

var getCoords = function(el){var box = el.getBoundingClientRect(),doc = elem.ownerDocument,html = doc.documentElement;body = doc.body,win = getWindow(doc),clientTop  = html.clientTop  || body.clientTop  || 0,clientLeft = html.clientLeft || body.clientLeft || 0,scrollTop  = win.pageYOffset || html.scrollTop  || body.scrollTop,scrollLeft = win.pageXOffset || html.scrollLeft || body.scrollLeft,top  = box.top  + scrollTop  - clientTop,left = box.left + scrollLeft - clientLeft;return { top: top, left: left };}function getWindow( el ) {return isWindow( el ) ?el :el.nodeType === 9 ?el.defaultView || el.parentWindow :false;}function isWindow( obj ) {return obj && typeof obj === 'object' && 'setInterval' in obj;}


总结一下下:
window.pageYOffset
非IE的东东,和IE的document.body.scrollTop很像,它是我们所见到的网页顶端到事实上的网页顶端的距离,比如,如果出现垂直滚动条,一直拉到最下面,那么我们看到的只是一屏,这一屏的高度就是document.documentElement.clientHeight,此时的window.pageYOffset就是parseFloat(window.getComputedStyle(document.documentElement, null).getPropertyValue('height')) - document.documentElement.clientHeight

clientTop, clientLeft
这两个东西说白了就是上边框和左边框的宽度值

热点排行
Bad Request.