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

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

javascript dom

如何在javascript中获得元素的真实位置,javascript,dom,Javascript,Dom,我想在javascript（或jquery短代码）中获得我的样式元素的实际X和Y位置但是这种代码有时不起作用当scrool top或scroll left change im未获得实际位置时：( 请帮助我..您需要相对于文档的元素偏移量。您必须记住，填充、边距和边框等样式可能会极大地影响偏移量的结果。您可能需要计算偏移量上或偏移量下的偏移量最后，您需要检查是否正在使用框大小调整，这会将填充和边框推到内部（最常见的版本是框大小调整：border box；）只需调试其他样式（加法/减法），直

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

但是这种代码有时不起作用

当scrool top或scroll left change im未获得实际位置时：(

请帮助我..

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

最后，您需要检查是否正在使用

框大小调整

，这会将填充和边框推到内部（最常见的版本是

框大小调整：border box；

）

只需调试其他样式（加法/减法），直到得到真正的偏移量。我主要通过制作屏幕截图（或使用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>

输出

'use strict';

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

有趣的是，由于

边距：20px自动；

，您可以很容易地测试

offsetLeft

是否有效。如果调整窗口大小，它也会有不同的

offsetLeft

     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;
   }


//我的css：
#我的照片{
利润率：100像素；
填充：20px；
边界：20px固体#cacaca；
}
#容器{
显示：块；
背景:#ffaaff；
宽度：550px；
填充：50px；
左边距：300px；
}

//我想在文档上获取Mypicture的realx和realY值。

//所有代码都工作Realx（ox）返回真值，但RealY（oy）接近10px false；

您不必使用偏移量。使用现代函数：

函数getPosition（元素）{ var rect=element.getBoundingClientRect（）；返回{ x:rect.left， y:rect.top }; } 然后，您可以像这样使用上述函数：

var-element=document.getElementById（'myElement'）；
var pos=获取位置（el）；
//X轴上的报警位置
警报（位置x）；
//Y轴上的报警位置
警报（位置y）；

在所有浏览器中都能正常工作您现在是否得到了不真实的位置？（OT）请尝试始终使用点符号：

offset.left

，不要忘记

parseInt

喜欢他的基数参数。var offset=obj.offset（）；ox=offset['left']；=document.getElementById（'Mypicture'））.offsetLeft；两个代码是获取相等的值..但不是获取填充，边界值：（你阅读了我答案中的所有内容吗？我已经解释过了，你必须考虑这些因素。顺便说一下，它们可以获取“真实值”值，但不是您想要的值。我在回答中已经指出，您必须查看哪些空间因素会改变基本偏移量，如填充和边框。除非确实必要，否则也不要使用负边距/填充。这是一种糟糕的做法。请记住，如果使用

填充：20px；

元素的高度将变为40px（2x20px）更高。而

框内容

的意思是

框大小

right？偏移量不计入边距。

getBoundingClientRect（）.left

（例如）将计入边距，并且您不必遍历DOM。+1这是计入边距的唯一方法。offsetLeft是有限的。

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

     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..

    <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;
   }