Convert css width string to regular number
Solution 1
If it always returns in px format, "100px", "50px" etc (i.e. not "em" or percent), you could just...
var width = parseInt($("#myelem").css("width"),10); // always use a radix
or
var width = parseInt(element.style.width,10); // always use a radix
It ignores the "px" suffix so you should be good to go.
Although deep down I'm thinking that something isn't right if $("#myelem").width() isn't working.
Note on hidden elements.
If you are adding jQuery to progressively enhance you page, the element you are calculating should be visible when the page first loads. So you should get the width before you initially hide the element. By doing this, $("#myelem").width() will work.
var myWidth = 0;
$(document).ready( function () {
myWidth = $("#myelem").width();
$("#myelem").hide();
});
Solution 2
In plain JavaScript:
parseInt('100px', 10)
Works with "100em", "100%", and even with: "100". No need for any Regular Expression patterns.
Solution 3
You could remove non-numericals with a regular expression and then just convert to a number. This works no matter how you define the width (px
, em
, %
, pt
). Preserves decimal points too.
vanilla javascript
Number(elem.style.width.replace(/[^\d\.\-]/g, ''));
jQuery
Number($elem.css('width').replace(/[^\d\.\-]/g, ''));
Solution 4
Oh, I came up with:
new Number($elem.css('width').slice(0, -2));
//to extract the 'px' and return a regular number
Now I only hope that jquery allways returns the same string fashion: "100px"
Related videos on Youtube
vitorhsb
Updated on July 09, 2022Comments
-
vitorhsb almost 2 years
While trying to compute the width of an hidden element I found that jquery.width() returns 0 for that elements' width.
I found out that using jquery.css('width') would return the correct width by using the declared style width (even if that value is different from the initial stylesheet). The problem is that the css('width') method returns a string, generally in a "100px" fashion. My question resolves into: how to retrieve the number from the "100px" string? Is there an easy way?
-
vitorhsb over 13 yearsAmmendment: The element I'm trying to calculate the width is resizable and can be hidden during the execution, therefore its width will eventually change.
-
-
vitorhsb over 13 yearsI agree to use the computed width. In fact the element was hidden in the load page event, plus a few more <code>.hide</code>. I changed the css from "display: none" to "visibility: hidden" and then I could read the same values using <code>.width()</code>. Super. Now, I all have to do is change all the <code>.hide()</code> excerpts into your suggested <code>.css('visible', 'hidden')</code>. I suspect that I also need to change the <code>.show()</code> into <code>.css('visibility', 'visible')</code>. Thanks.
-
Lasse Espeholt over 13 yearsInstead of doing all that work. Then you could apply
visible: hidden
and thereafter.show()
and then measure the width. After you have measured it, reverse that. Then you don't have do change so much. Objects still affects the page when they are hidden byvisible: hidden
- beware of that. -
Lasse Espeholt over 13 yearsThe reason why
.width()
is not working is that if objects are hidden by.hide()
(display: none
) they don't contribute to the layout and therefore have no width. -
Pat over 13 yearsIt will if you've defined them all as
px
. However if you've got some widths as%
, it will come back as50%
and your slice function will trim off the rightmost digit. You could useindexOf
to test forpx
for safety. -
vitorhsb over 13 yearsThe element I'm trying to calculate the width is resizable and can be hidden during the execution, therefore its width will eventually change. Thus, as you suggested, I can use a variable to hold it's value which is calculated on page
.ready()
event and in every resize callback event I must re-calculate - using.width()
- and apply the new value. Therefore, even when the element is hidden I will have the current value. -
hofnarwillie over 10 yearsor you could remove non-numericals with a regular expression. This works no matter how you define the width (
px
,em
,%
,pt
) js:Number(elem.style.width.replace(/[^\d\.]/g, ''));
or jQuery:Number($elem.css('width').replace(/[^\d\.]/g, ''));
-
hofnarwillie over 10 years
Number($elem.css('width').replace(/[^\d\.]/g, ''));
- a regular expression combined with a convert to number solves thepx
/em
/%
problem. -
Frank over 4 yearsJust curious, but what's the benefit of explicitly passing in a radix? Doesn't it default to 10? Nice solution, by the way.
-
Fenton over 4 years@Frank these days browsers are pretty good with defaults... but I'm super old and still remember issues with browsers using non
10
radix.