javascript - 如何获得元素的右侧位置？

Question

我在页面上有 div，我需要从与视口(viewport)相关的右侧知道它的位置。我试过这段代码:

const el = this.searchWrapper.getBoundingClientRect();
el.right 

但这不是我需要的，因为 getBoundingClientRect() 从左侧开始计算，但我需要计算元素和视口(viewport)右侧之间的距离，如下面的屏幕所示

Answer 1

你可以这样做:

const div = document.querySelector('div');
const span = document.querySelector('span');

const rect = div.getBoundingClientRect();

const position = window.innerWidth - rect.right + div.offsetWidth;

span.style.left = position + 'px';

console.log(position);

body {
  display: flex;
  justify-content: center;
}

span {
  position: absolute;
  top: 50px;
  padding: 10px;
  border-left: 1px solid
}

<div>I am a div</div>
<span>Distance from left</span>

减右rect元素的宽度从窗口的宽度，然后添加 div 的宽度来找到位置。
如果您只需要距视口(viewport)右侧的距离，减去 position来自 window.innerWidth :

const div = document.querySelector('div');
const span = document.querySelector('span');

const rect = div.getBoundingClientRect();

const position = window.innerWidth - rect.right + div.offsetWidth;

span.style.right = window.innerWidth - position + 'px';

console.log(window.innerWidth - position);

body {
  display: flex;
  justify-content: center;
}

span {
  position: absolute;
  top: 50px;
  padding: 10px;
  border-right: 1px solid;
}

<div>I am a div</div>
<span>Distance from right</span>

编辑
从窗口右侧到元素的开始:

const div = document.querySelector('div');
const span = document.querySelector('span');

const rect = div.getBoundingClientRect();

const position = window.innerWidth - rect.right;

span.style.right = window.innerWidth - position + 'px';

console.log(window.innerWidth - position);

body {
  display: flex;
  justify-content: center;
}

span {
  position: absolute;
  top: 50px;
  width: 120px;
  border-right: 1px solid;
}

<div>I am a div</div>
<span>Distance from the right-side of the window to the left-side of the div</span>