14

在此处输入图像描述

我想在 javascript（或 jquery 短代码）中获得我的样式元素的真实 X 和 Y 位置。

var offset = obj.offset();
  ox=offset['left']; 
  oy=offset['top']; 

  px=parseInt(obj.css('padding-left')); // padding left
  py=parseInt(obj.css('padding-top')); // padding top
  bx=parseInt(obj.css('border-width') ); // stroke value
  ox=ox+px+bx;
  oy=oy+py+bx;

但是这些代码有时不起作用..

当scool top 或scroll left 改变时我没有得到真正的位置:(

请帮我..

4

3 回答 3

16

您不必使用偏移量。使用现代getBoundingClientRect功能：

function getPosition( element ) {
    var rect = element.getBoundingClientRect();
    return {
        x: rect.left,
        y: rect.top
    };
}

然后你可以像这样使用上面的函数：

var element = document.getElementById( 'myElement' );
var pos = getPosition( el );

// Alert position in X axis
alert( pos.x );

// Alert position in Y axis
alert( pos.y );

适用于所有浏览器

编辑：如果您想要元素相对于页面滚动的位置，只需添加document.body.scrollTop到 Y 位置和document.body.scrollLeftX 位置。

于 2016-11-21T16:15:43.190 回答
-1 
     var offset = obj.offset();
      ox=offset['left']; = document.getElementById('Mypicture').offsetLeft;
      oy=offset['top'];  = document.getElementById('Mypicture').offsetTop;
    px=parseInt(obj.css('padding-left')); // padding left
    py=parseInt(obj.css('padding-top')); // padding top
    bx=parseInt(obj.css('border-width') ); // stroke value
    ox=ox+px+bx;
    oy=oy+py+bx;

//Two codes get equal value;  But Not Real clientX ClientY positions..

//我的html：

    <div id="container">
    <img id="Mypicture" src="myimage.jpg"  alt="The source image for paint"/>
    </div>

//My css :

  #Mypicture{
  margin:100px;
  padding:20px;
  border: 20px solid #cacaca;
  }

  #container {
  display:block;
  background:#ffaaff;
  width: 550px;
  padding:50px;
  margin-left:300px;
   }

// 我想在 Document 上获取 Mypicture 的 realx 和 realY 值。// 所有代码都有效 Realx(ox) 返回真值 但 RealY(oy) 接近 10px 为假；

于 2013-04-04T18:55:55.070 回答
-1

您需要元素相对于文档的偏移量。您必须记住，填充、边距和边框等样式会极大地影响偏移的结果。您可能想要计算偏移量或偏移量。

最后你需要检查你是否正在使用box-sizing，它将填充和边框推到内部（最常见的版本box-sizing: border-box;）；

document.getElementById('cloud').offsetLeft; //offsetTop

只需使用其他样式（加/减）进行调试，直到获得真正的偏移量。我主要通过制作屏幕截图（或使用 OS X 选择性屏幕截图功能）来测试偏移是否正确，以查看是否使用其他样式正确计算了偏移（计算像素）。

这是一个小例子：

CSS

#cloud {
    height: 500px;
    width: 500px;
    margin: 20px auto;
    border: 1px dotted #CCC;
}

HTML

<body>
    <div id="cloud">
        <div id="centerBox"></div>
    </div>
</body>

JavaScript

'use strict';

console.log(document.getElementById('cloud').offsetLeft);
console.log(document.getElementById('cloud').offsetTop);

输出

main.js: 1 >>> 372
main.js: 2 >>> 20

有趣的是，您可以轻松测试是否offsetLeft因为margin: 20px auto;. 如果您调整窗口大小，它也会有不同的offsetLeft.

于 2013-04-04T16:30:48.820 回答