2011-05-26 96 views
3

之类的标题说,如何让元素的X,相对于y位置,以他们在网页中的位置和它们的定位方案,例如绝对值,相对值等,如何获得一个元素

回答

5
的位置

使用jQuery:

var $elt = $('select an element however'), 
    cssPosition = $elt.css('position'), 
    offset = $elt.offset(), 
    top = offset.top, 
    left = offset.left; 

没有jQuery的,使用Quirksmode's findPos function

var elt = document.getElementBy..., 
    pos = findPos(elt), 
    top = pos[1], 
    left = pos[0]; 

获取计算CSS position值无库another can of worms。它归结为:

+4

我很欣赏评论,但是......我的答案是怎么回事_not_ JavaScript? jQuery是JavaScript,我也展示了如何在没有jQuery的情况下做到这一点。 – 2011-05-26 23:06:50

+0

jQuery的定位并不总是正确的,PPK的版本很简单 - 在某些情况下它会失败。浏览器有各种各样的定位怪癖,IE的严格,compat和quirks模式增加了混合。保持简单,生活更容易。 – RobG 2011-05-27 00:50:40

+0

@RobG所以你有什么建议呢?我从来没有真正遇到过jQuery算法的问题。 – 2011-05-31 16:57:40

6

在现代浏览器,getBoundingClientRect和getClientRects会给你RECT对象描述你的元素。见https://developer.mozilla.org/en/DOM/element.getBoundingClientRecthttps://developer.mozilla.org/en/DOM/element.getClientRects

如果你有IE8的工作,那么你就必须做在不同的浏览器不同的事情得到正确的答案(如对象检测getBoundingClientRect和依傍一些其他的方法,如果它不存在) 。

jQuery offset()计算和Quirksmode findPos将在任何执行子像素定位的浏览器(例如Firefox或IE9)中给出不正确的答案,因为它们会将答案四舍五入为整数个像素。根据你在做什么,这可能会也可能不会。

4

看看这个

JS:

function findPos(obj) { 
    var curleft = curtop = 0; 
    if (obj.offsetParent) { 
     curleft = obj.offsetLeft 
     curtop = obj.offsetTop 
     while (obj = obj.offsetParent) { 
      curleft += obj.offsetLeft 
      curtop += obj.offsetTop 
     } 
    } 
    return [curleft,curtop]; 
} 

HTML:

<div id="ser">&nbsp;TEST</div> 

回电:

alert(findPos(document.getElementById('ser'))); 

我希望它对您有所帮助

+0

仅供参考:该片段包含错误。变数“curtop”正在污染全球范围。我刚刚在quirksmode.org上写了一封关于它的文章。 http://www.quirksmode.org/js/findpos.html – 2014-08-12 04:21:46