CODEWITHSUNDEEP
javascriptjqueryhtmlcssdom
HTMLNoob
HTMLNoob

Reputation: 821

Setting a CSS value as a javascript variable

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.

Upvotes: 0

Views: 958

Answers (3)

Dino
Dino

Reputation: 806

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;

Upvotes: 0

Ibrahim Khan
Ibrahim Khan

Reputation: 20740

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>

Upvotes: 5

Ankit vadariya
Ankit vadariya

Reputation: 1263

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.

Upvotes: 0

Related Questions