span等标签top left问题

Question

jqueryjscss

Answer 1

offsetLeft/offsetTop<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.4.2.min.js"></script>
<script language="javascript">
function abs(){
  var sp=$('#sp')[0],left=sp.offsetLeft,top=sp.offsetTop;
  while(sp=sp.offsetParent){left+=sp.offsetLeft;top+=sp.offsetTop}
  alert(left+'\n'+top)
  $('#sp').css({position:'absolute',left:left,top:top});
  setTimeout(function(){$('#sp').css('top',300)},3000);
}
</script>
<br><br>　　<input type="button" onclick="abs()" value="span设置为absolute"/>　<span id="sp">span</span>

Answer 2

$('#sp').offset().left
$('#sp').offset().top

Answer 3

function getXY(obj) {
    var xy = { x: obj.offsetLeft, y: obj.offsetTop };
    if (obj.nodeName.toUpperCase() == 'BODY') {
        return xy;
    }
    if (obj.parentNode) {
        if (obj.parentNode.nodeName.toUpperCase() != 'BODY') {
            var parentXY = (obj.nodeName.toUpperCase() == 'TD' || obj.parentNode.nodeName.toUpperCase() == 'FORM') ? getXY(obj.parentNode.parentNode) : getXY(obj.parentNode);
            xy = { x: obj.offsetLeft + parentXY.x, y: obj.offsetTop + parentXY.y }
        }
    }
    return xy;
}