Question

enter image description here

我希望在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;

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

当scrool顶部或向左滚动改变我没有得到真正的位置:(

请帮帮我..

Answer 1

您不必使用抵消。使用现代方式：

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

适用于所有浏览器:) ..像这样使用

var el = document.getElementById( 'myElement' );
var pos = getPosition( el );
alert( pos.x ); alert( pos.y );

Answer 2

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

最后，你需要检查你是否正在使用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。

Answer 3

     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的放松和真正价值。 //所有代码都工作Relax（ox）返回true值但是RealY（oy）接近10px false;

如何在javascript中获取元素的真实位置

3 个答案: