getting width of content, not viewport using vanilla JavaScript

Question

I have tried the following and gotten the viewport width:

document.documentElement.clientWidth

and

window.innerWidth

However, what I want to get is the width of the content including overflow, for example if I had an image on the page <img src=".." style="width: 4000px !important;" /> <img src=".." style="width: 4000px !important;" /> . In other words, the entire scrollable width. How would I do this?

Answer 1

Use scrollWidth for the body scrollWidth docs . Also please don't use !important . Only use it as a last resort

 console.log(document.body.scrollWidth) 

  <img src="https://via.placeholder.com/150" style="width: 4000px;" /> 

Answer 2

You can do this with Element.offsetWidth

document.documentElement.offsetWidth

You can read more about offsetWidth here