Get element width with right unit

Question

Is possible to get "10vw" for the element width in browser or extension.Chrome "Copy Styles" just works fine.But I wanna do it in an extension.

Source code for chrome devtools

<style>
  div { width: 10em }
  body div { width: 10em }
  #id { width: 10vw }
</style>

<div id="dom"></div>

// if viewport width is 375px

var dom = document.getElementById('app');
var style = window.getComputedStyle(dom);

var width = style.getPropertyValue('width');

console.log(width) // 37.5px, "10vw" would be great

I don't understand, is it not working? What result are you expecting? That would give you 10% of the view-port's current width. Is it not what you want? — Carl Binalla, Dec 26 '19 at 07:08
Are you trying to query the elements width in Javascript and get the result in `vw` instead of the default `px`? — Swimmer F, Dec 26 '19 at 07:11
I want "10vw" to be returned , the result i get with "window.getComputedStyle" is "37.5px" if viewport width is 375px. — 李晓爽, Dec 26 '19 at 07:12
Maybe the unit i use in css is not "vw", it could be "em" or "rem" or something else. — 李晓爽, Dec 26 '19 at 07:17
Maybe this helps: https://stackoverflow.com/questions/754607/can-jquery-get-all-css-styles-associated-with-an-element — Swimmer F, Dec 26 '19 at 07:37

score 1 · Answer 1 · answered Dec 26 '19 at 07:11

1

var element = document.getElementById('dom')
var elementWidth = getComputedStyle(element ).width

this will always return width with pixels. hope this will be helpfull

answered Dec 26 '19 at 07:11

vikas nirwal

29
1

Get element width with right unit

1 Answers1