problem with converting Pixel to Viewport units using Javascript

Question

I want to convert px to the viewport units (vh and vw). So I used these with no success?

var newWidth = yourElement.outerWidth / document.documentElement.clientWidth *100;
var newHeight = yourElement.outerHeight / document.documentElement.clientHeight *100;

I just get NaN.

I put my calculation in a timeout to be sure I'm selecting the element only when it's rendered.

How can I convert px to viewport units correctly?

The problem seem to be in yourElement width and height.. try using `offsetWidth` — V.Volkov, Aug 15 '20 at 08:12
`outerWidth` and `outerHeight` belong to the browser `window` — Daniel_Knights, Aug 15 '20 at 08:13

score 0 · Accepted Answer · answered Aug 15 '20 at 08:15

0

yourElement.offsetWidth should work for you Check out this answer to identify the sizes properly: How do I retrieve an HTML element's actual width and height?

answered Aug 15 '20 at 08:15

V.Volkov

731
3
12

problem with converting Pixel to Viewport units using Javascript

1 Answers1