javascript 如何在javascript中获取元素的真实位置
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15816503/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How get real positions of element in javascript
提问by Mahmut Duman
I want to get real X and Y position of my styled elements in javascript ( or jquery short code).
我想在 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;
But this codes sometimes not work..
但是这个代码有时不起作用..
when scrool top or scroll left change im not get real position :(
当滚动顶部或向左滚动更改时，我没有得到真正的位置:(
please help me..
请帮我..
回答by Sayanjyoti Das
You don't have to use offsets. Use the modern getBoundingClientRectfunction:
您不必使用偏移量。使用现代getBoundingClientRect函数：
function getPosition( element ) {
var rect = element.getBoundingClientRect();
return {x:rect.left,y:rect.top};
}
You could then use the above function like this:
然后你可以像这样使用上面的函数：
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 );
Works in all browsers
适用于所有浏览器
EDIT:If you want the position of the element with respect to page scroll, then just add document.body.scrollTopto Y position and document.body.scrollLeftto X position.
编辑：如果您想要元素相对于页面滚动的位置，则只需添加document.body.scrollTop到 Y 位置和document.body.scrollLeftX 位置。
回答by Mahmut Duman
You'll want the offset from the element relative to the document. You have to keep in mind that styles like padding, margin and border can greatly affect the result of the offset. You might want to calculate those on or off the offset.
您需要元素相对于文档的偏移量。您必须记住，填充、边距和边框等样式会极大地影响偏移的结果。您可能想要计算那些打开或关闭偏移量的值。
Finally you need to check if you are using box-sizing, which pushing padding and borders to the inside (with the most common version box-sizing: border-box;);
最后，您需要检查您是否正在使用box-sizing，将填充和边框推到内部（使用最常见的版本box-sizing: border-box;）；
document.getElementById('cloud').offsetLeft; //offsetTop
Just debug with the other styles (adding/subtracting) until you get the real offset. I mostly test if the offset is correct by making a screenshot (or using the OS X selective-screenshot function) to see if the offset is correctly calculated (counting pixels) with the other styles.
只需使用其他样式（加/减）进行调试，直到获得真正的偏移量。我主要通过制作屏幕截图（或使用 OS X 选择性屏幕截图功能）来测试偏移是否正确，以查看偏移是否正确计算（计算像素）与其他样式。
Here's a little example:
这是一个小例子：
CSS
CSS
#cloud {
height: 500px;
width: 500px;
margin: 20px auto;
border: 1px dotted #CCC;
}
HTML
HTML
<body>
<div id="cloud">
<div id="centerBox"></div>
</div>
</body>
JavaScript
JavaScript
'use strict';
console.log(document.getElementById('cloud').offsetLeft);
console.log(document.getElementById('cloud').offsetTop);
Ouput
输出
main.js: 1 >>> 372
main.js: 2 >>> 20
Funny thing here, you can easily test if the offsetLeftworks because of the margin: 20px auto;. If you resize the window it will also have a different offsetLeft.
有趣的是，您可以轻松测试是否offsetLeft有效，因为margin: 20px auto;. 如果您调整窗口大小，它也会有不同的offsetLeft.
回答by Mahmut Duman
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..
// My html:
//我的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;
}
// I want to get realx and realY value of Mypicture,on Document. // All codes work Realx ( ox ) return true value But RealY (oy) nearly 10px false;
// 我想在 Document 上获取 Mypicture 的 realx 和 realY 值。// 所有代码都有效 Realx ( ox ) 返回真值 但 RealY (oy) 接近 10px false;
