Setting a CSS value as a javascript variable

Question

Ok, I want to have a CSS value such as the value of width: 50%; to be a variable defined in pixels. Let's say that the 50% width is perhaps 1000px, or 500px. I want the javascript to detect the pixel value of the percent.

I have tried several times with absolutely no luck.

not very clear. do you want to detect a width of an element and then work of 50% of that? — BenG
– BenG, Commented Jan 12, 2016 at 8:25
No, what I want to do is have a percentage translated into pixel value with javascript. — HTMLNoob
– HTMLNoob, Commented Jan 12, 2016 at 8:27

Ibrahim Khan · Accepted Answer · 2016-01-12 08:28:58Z

5

You can do it like below using jquery.

var width = $('#your_id').width();

Example

var width = $('#myDiv').width();
alert(width + 'px');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div style="width: 200px;">
    <div id="myDiv" style="width: 50%;"></div>
</div>

edited Jan 12, 2016 at 8:28

answered Jan 12, 2016 at 8:23

Ibrahim Khan

20.8k7 gold badges46 silver badges57 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

HTMLNoob Over a year ago

Yes this would work fine, I will check mark it as soon as 7 mins are up(I have to wait 7 mins) BTW can you put width: 50% and do the same thing?

HTMLNoob Over a year ago

oh sorry I was looking at the first div. Thank you Azim!!

Ankit vadariya · Accepted Answer · 2016-01-12 08:26:59Z

0

var total_width = $( window ).width();
var display_width = 50; //50%
var my_width_px = ((display_width * total_width) / 100); // 100 = 100%

This will may be helpful for you.

answered Jan 12, 2016 at 8:26

Ankit vadariya

1,27313 silver badges15 bronze badges

Comments

Dino · Accepted Answer · 2016-01-12 08:30:17Z

0

You can get the width in pixels using jQuery

var width = $('#mydivid').width();

Set the width of a div using jQuery

$("#mydivid").css("width", your_new_width);

Get width using javascript

document.getElementById("mydivid").offsetWidth;

answered Jan 12, 2016 at 8:30

Dino

8061 gold badge8 silver badges22 bronze badges

Collectives™ on Stack Overflow

Setting a CSS value as a javascript variable

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related