如何在javascript中获取元素的真实位置
我希望在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顶部或向左滚动更改我不能得到真正的位置:(
请帮我..
Say*_*Das 14
您不必使用偏移量.使用现代方式:
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 );
小智 0
您需要元素相对于文档的偏移量。您必须记住，填充、边距和边框等样式会极大地影响偏移的结果。您可能想要计算偏移量上或偏移量外的值。
最后你需要检查你是否正在使用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;
}
超文本标记语言
<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.
- 你所说的“盒子内容”是指“盒子大小”，对吗？http://quirksmode.org/css/user-interface/boxsizing.html (2认同)