CODEWITHSUNDEEP
javascripthtmlcss
Oliver Williams
Oliver Williams

Reputation: 6334

getting width of content, not viewport using vanilla JavaScript

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;" />. In other words, the entire scrollable width. How would I do this?

Upvotes: 0

Views: 188

Answers (2)

Mihai T
Mihai T

Reputation: 17687

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;" />

Upvotes: 2

Edwin Dijas Chiwona
Edwin Dijas Chiwona

Reputation: 620

You can do this with Element.offsetWidth

document.documentElement.offsetWidth

You can read more about offsetWidth here

Upvotes: -1

Related Questions