How can I get the user display size?

Question

I'm using percentages in "width" and "height" properties. How can I get them in pixels using JS?

something like that:
//totally inaccurate, it's just for explaining

<div style="height:80%; width:50%;" id="ex">Text</div>
<script>
var el = document.getElementById("ex");

/*What I want: */
el.style.fontSize = el.pixelHeight+"px";
<script>

I hope you understand :P

Answer 1

<div style="height:80vw; width:50vw;" id="ex">Text</div>
<script>
var el = document.getElementById("ex");
el.style.fontSize = el.style.width;
<script>

/* do it like this, "vw" is the same as "%" */

Answer 2

What number does "el.style.style.width" return?

Answer 3

Access to style property of html element access only to it's inlining style property declaration: if another rule apply, the property doesn't return good value... and unit of returned value is unit of rules ( so @VH solution works because unit is percetage of viewport width instead of parent witdth, but does'nt apply a 'px' unit to font-size style ^^ )

Solution is to use window.getComputedStyle() function, which return the 'px' computed value ( whatever the place of the rules applyed definition is ):

var el=document.getElementById('el_id');
var st = window.getComputedStyle(el);
document.write(st.width);

The return type value is a string, with 'px' appending: if 'el_id' element has a style rule declaration setting a % value, you'll get kind of:

102.5px

Answer 4

el.style.width?
Can you tell me what is "el"?

Answer 5

No, I mean what is that element. I would suggest you to publish the code and make this debugging question.

Answer 6

jQuery way?
$(document).ready(function(){
var $width=$("#el").width();
});

Answer 7

el.width?

Answer 8

great, returns "undefined"

Answer 9

el = element