http://www.ruanyifeng.com/blog/2009/09/find_element_s_position_using_javascript.html

获取元素 clientX 最简单方法 亲测.

        function getElementLeft(element){
    var actualLeft = element.offsetLeft;
    var current = element.offsetParent;
    while (current !== null){
      actualLeft += current.offsetLeft;
      current = current.offsetParent;
    }
    return actualLeft;
  }


上面这个函数 好像要手动定义下...... 不然用不了下面的 函数....
var yy = getElementLeft(leftDiv);
            console.log("leftDiv:" + yy);
var xx = getElementLeft(lineLeft);
            console.log("xx:" + xx);
var zz = getElementLeft(middleDiv);
            console.log("middleDiv:" + zz);
var yy = getElementLeft(leftDiv);
        console.log("leftDiv:" + yy);

元素 的绝对位置

网页元素的绝对位置,指该元素的左上角相对于整张网页左上角的坐标。这个绝对位置要通过计算才能得到。

offset 有两个: 一个是div内的 一个是div外部的 也就是父div 到浏览器边框的距离.

两个相加 才是 正确的 坐标….

getBoundingClientRect()方法。

不支持 chrome/safari  它返回一个对象,其中包含了left、right、top、bottom四个属性,分别对应了该元素的左上角和右下角相对于浏览器窗口(viewport)左上角的距离。

div 坐标获取

方法一: var odiv=document.getElementById(‘divid’); alert(odiv.getBoundingClientRect().left); alert(odiv.getBoundingClientRect().top);

var X = $(‘#DivID’).offset().top; var Y = $(‘#DivID’).offset().left; 获取相对(父元素)位置: var X = $(‘#DivID’).position().top; var Y = $(‘#DivID’).position().left;

getBoundingClientRect获取元素位置

getBoundingClientRect用于获得页面中某个元素的左,上,右和下分别相对浏览器视窗的位置。getBoundingClientRect是DOM元素到浏览器可视范围的距离(不包含文档卷起的部分)。该函数返回一个Object对象,该对象有6个属性:top,lef,right,bottom,width,height;这里的top、left和css中的理解很相似,width、height是元素自身的宽高,但是right,bottom和css中的理解有点不一样。right是指元素右边界距窗口最左边的距离,bottom是指元素下边界距窗口最上面的距离。

position offset

.position()是相对于相对于父级元素的位移。

offset()方法允许我们检索一个元素相对于文档(document)的当前位置。

$(".btn1").click(function(){
  x=$("p").position();
  $("#span1").text(x.left);
  $("#span2").text(x.top);
});

position 只有 left和top 没啥大用