以编程方式使两个组件在窗口上具有相同的x位置?

时间:2019-03-29 10:32:56

标签: javascript html

我要强制执行两项以始终垂直对齐。 用户可以与A交互,并且如果他们横向移动它,则无论它在哪里,代码都需要自动将其重新对齐到B。

示例

 A

   ----> B

事件后的结果:

 A

 B

简单的方法是将两个值都设置为始终具有相同的x坐标。

我正在触发事件侦听器,在该事件侦听器中我得到了getBoundingClientRect()的值,类似以下内容:

var ACoordinates = A.getBoundingClientRect()
var B.style.margin-left = - ACoordinates.left

不幸的是,这里的值似乎是错误的,因为getBoundingClientRect()返回的是一个很小的值,我可以肯定地说这是不正确的(我使用视觉标尺测量从浏览器边框到元素所在位置的距离)。

这是为什么?据我了解,clientRect的值应指示当前浏览器视图内的坐标,还是我错了?

我如何在屏幕上获取当前的x坐标并确保它们同步?

0 个答案:

没有答案