Get offset right in vanilla JavaScript

Question

How do I get the offset of an element from the right side, relative to the window?

I can only find jQuery solutions but I need a solution using vanilla JavaScript.

This is the solution using jQuery

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

How do I translate this to vanilla JavaScript?

[you might not need jquery](https://youmightnotneedjquery.com/) — Luis felipe De jesus Munoz, Jul 05 '18 at 13:58
@LuisfelipeDejesusMunoz OP isn't asking for jQuery, they are using jQuery as an example and asking how to do it natively — Patrick Evans, Jul 05 '18 at 13:59
@LuisfelipeDejesusMunoz How is this relevant? He's asking for vanilla javascript solution not jQuery. — Adrian, Jul 05 '18 at 14:00
@PatrickEvans The link shows implementation of jquery funcion as `offset()` and `width()` in vanillaJS. He could just port his current solution using jquery to vanillaJS using these examples — Luis felipe De jesus Munoz, Jul 05 '18 at 14:01
@LuisfelipeDejesusMunoz If that's right, then putting "you might not need jquery" as a comment is not really reflecting the intentions, does it. — Adrian, Jul 05 '18 at 14:04
@Adriani6 , I think that the comment from Luis is ok...it's like a RTFM kind of comment. — Hackerman, Jul 05 '18 at 14:06
True guys, but that still is not what the intentions are. I would rather have a comment with "RTFM" than opposite of what the question is, that's personal preference though. Not being salty or anything, don't take it personally. — Adrian, Jul 05 '18 at 14:09

score 9 · Accepted Answer · edited Mar 03 '21 at 03:29

9

You could try using element.getBoundingClientRect() to achieve that behavior. If you wrote your code to use this instead of jQuery, it would look something like:

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

edited Mar 03 '21 at 03:29

Aleksandar Misich

487
2
15

answered Jul 05 '18 at 14:08

MysterX

2,318
1
12
11

Thanks, exacly what I needed :) – Red Jul 05 '18 at 14:19

score 1 · Answer 2 · answered Jul 05 '18 at 14:07

You can get the width of an element using .innerWidth
You can get the offset values of a element using getBoundingClientRect()
You can get the outerWidth using offsetWidth

Porting your solution would be something like this:

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

For more info you can check this link

score 0 · Answer 3 · answered Jul 05 '18 at 14:08

You can get the offset left position using the .offsetLeft attribute on an element. https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/offsetLeft

For outer width see this answer: outerWidth without jquery

So it would be written something like:

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

score 0 · Answer 4 · answered Jul 05 '18 at 14:11

Just grab the window size and subtract the x offset plus the width of the element you want to get the offset for.

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

score 0 · Answer 5 · edited Jul 06 '18 at 08:53

You just need to translate the jQuery functions in vanilla JS.

$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>

Of course there are many other ways how to do it.

score 0 · Answer 6 · answered Nov 08 '20 at 23:25

None of the above answers returned the correct value in my case, if there was scrolling involved. Here's what did the trick in my case:

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

console.log(offset);

Get offset right in vanilla JavaScript

6 Answers6