获取元素的精确坐标


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;
}


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

[b][size=large]clientTop, clientLeft[/size][/b]
这两个东西说白了就是上边框和左边框的宽度值
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值