Question

如何获得元素相对于window从右侧的偏移量？

我只能找到jQuery解决方案，但我需要使用香草JavaScript的解决方案。

这是使用jQuery的解决方案

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

如何将其转换为原始JavaScript？

Answer 1

您不能尝试使用element.getBoundingClientRect()来实现该行为。因此，如果在没有jQuery的情况下翻译您的代码，它将是这样的：

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

Answer 2

您可以使用.innerWidth
您可以使用getBoundingClientRect()
您可以使用offsetWidth

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

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

有关更多信息，您可以检查this link

Answer 3

您可以使用元素上的.offsetLeft属性获得左偏移量。 https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/offsetLeft

有关外部宽度，请参见以下答案： outerWidth without jquery

因此它将写为：

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

Answer 4

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

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

Answer 5

您只需要翻译香草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');
console.log(window.innerWidth - (el.offsetLeft + el.offsetWidth));

<div id="test"></div>

当然还有许多其他方法。

Answer 6

在我的情况下，如果涉及滚动，以上答案均未返回正确的值。这是我的诀窍：

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

console.log(offset);

在原始JavaScript中正确获取偏移量

6 个答案: