javascript之jquery如何获取元素的坐标呢?


摘要:
下文讲述jquery的相关技巧-获取元素坐标的方法分享,如下所示;

例:

 实现思路:
    获取指定元素的绝对坐标,可使用offset对象中的top和left属性
    获取指定元素相对父元素的位置,可使用position对象中的top和left属性

例:获取元素id等于divTest的元素坐标

 <meta charset='utf-8' />
<p>
 maomao365.com <br />
jquery获取元素坐标的示例分享
</p>
<hr />
<script
 src="http://libs.baidu.com/jquery/1.9.0/jquery.js" >
</script>  
<style>
  #divTest{
     background-color:green;
     margin:20px;
     width:200px;
     height:200px;
     padding:5px;
     color:white;
  }
</style>
<script>
$(function() {
  
  //绝对坐标
  var x1 = $('#divTest').offset().top;
  var y1 = $('#divTest').offset().left;

  //相对坐标
  var x2 = $('#divTest').position().top;
  var y2 = $('#divTest').position().left;
 
  $("#divTest").html("divTest对象的绝对坐标:<br />x:"+x1+" <br />y:"+y1 +" <br />相对父级坐标<br />x2:"+x2+" <br />y2:"+y2);
  
});
</script>

<div >
 <div id="divTest">
  </div>
</div> 
javascript jquery获取坐标的示例分享

javascript jquery获取坐标的示例分享