如何使用Wix Velo获取元素相对于窗口的位置？

嘿，你用getBoundingClientRect()的思路完全没问题！Wix Velo里确实可以通过这个方法来获取元素（不管是矢量图还是按钮）相对于浏览器窗口的位置，我给你把细节说清楚：

首先要确保代码在页面加载完成后执行，也就是放在$w.onReady()钩子里面，不然页面元素还没渲染好，可能拿不到正确的结果。

接下来直接上完整的示例代码，不管是矢量元素还是按钮，写法都一样：

$w.onReady(function () {
  // 替换成你要获取的元素ID，比如按钮的#button1
  const targetElement = $w('#vector1');
  // 获取元素的位置矩形信息
  const positionRect = targetElement.getBoundingClientRect();
  
  // 这里可以按需使用返回的位置属性
  console.log("元素顶部到窗口顶部的距离：", positionRect.top);
  console.log("元素左侧到窗口左侧的距离：", positionRect.left);
  console.log("元素的宽度：", positionRect.width);
  console.log("元素的高度：", positionRect.height);
});

getBoundingClientRect()返回的对象里还有bottom（元素底部到窗口顶部的距离）和right（元素右侧到窗口左侧的距离）属性，你可以根据需求取用。

另外要注意两个点：

• 如果你的元素是动态生成的（比如在重复器里），那得在元素渲染完成的事件里调用这个方法，比如用$w('#repeaterId').onItemReady()，不然会因为元素还没加载导致获取失败。
• 这个方法返回的是相对于当前视口的位置，要是页面滚动了，这些值会跟着变化。如果需要获取相对于整个文档的位置，可以把positionRect.top加上window.scrollY，positionRect.left加上window.scrollX。

备注：内容来源于stack exchange，提问作者jawher