在vanilla JavaScript中获得正确的偏移量

如何获取元素相对于

窗口的右侧偏移量

我只能找到jQuery解决方案，但我需要一个使用普通JavaScript的解决方案

这是使用jQuery的解决方案

var rt = ($(window).width() - ($whatever.offset().left + $whatever.outerWidth()));

如何将其转换为普通JavaScript？

• 您可以使用

  .innerWidth

• 您可以使用

  getBoundingClientRect（）

• 您可以使用

  offsetWidth

移植您的解决方案将是这样的：

window.innerWidth - (element.getBoundingClientRect().left + element.offsetWidth)

---

有关更多信息，您可以查看

，您可以尝试使用来实现该行为。如果您编写的代码使用此函数而不是jQuery，那么它将类似于：

var rt = window.innerWidth - element.getBoundingClientRect().right;

var rt = function() {
  var someElement = document.getElementById('someID');
  return window.innerWidth - (someElement.offsetLeft + someElement.offsetWidth);
}

---

可以使用元素上的.offsetLeft属性获取左偏移位置。

关于外部宽度，请参见以下答案：

因此，它将被写成如下内容：

var rt = window.innerWidth - element.getBoundingClientRect().right;

var rt = function() {
  var someElement = document.getElementById('someID');
  return window.innerWidth - (someElement.offsetLeft + someElement.offsetWidth);
}

---

只需获取窗口大小，然后减去x偏移量加上要获取偏移量的元素的宽度

function windowOffsetRight (ele) { 
    let rect = ele.getBoundingClientRect (); 
    let width = document.documentElement.getBoundingClientRect().width;
    return  width - ( rect.x + rect.width)
}

---

您只需要在vanilla JS中翻译jQuery函数

$window() // jQuery
window // Vanilla JS

$whatever // jQuery (probably a variable of $('.whatever'))
document.querySelectorAll('.whatever') // Vanilla JS

offset().left // jQuery
offsetLeft // Vanilla JS

outerWidth() // jQuery
offsetWidth // Vanilla JS

const el=document.getElementById（'test'）；
log（window.innerWidth-（el.offsetLeft+el.offsetWidth））
在我的案例中，如果涉及滚动，上述答案都没有返回正确的值。以下是我的案例中的诀窍：

var clientRect = document.querySelector("#element").getBoundingClientRect();
var offset = { 
    top: clientRect.top + window.scrollY, 
    left: clientRect.left + window.scrollX, 
};

console.log(offset);

@LuisfelipedJesusmunoz OP并没有要求使用jQuery，而是以jQuery为例，询问如何使用jQuerynatively@LuisfelipeDejesusMunoz这有什么关系？他要求的是普通的javascript解决方案，而不是jQuery。@PatrickEvans该链接显示了jQuery函数的实现，如vanillaJS中的
offset（）
和
width（）
。他可以使用jquery将当前的解决方案移植到使用这些examples@LuisfelipeDejesusMunoz如果这是对的，那么将“您可能不需要jquery”作为注释并不是真正反映意图，是吗