Assigned width in percentage but want to get it in pixels

Answer 1

I am not sure about this fact but $("#id/.class").width() gives the value in pixels in my case.

In above screen-shot you can find different values of $("#id/.class").width() in pixels at different screen size of browser.

Well I'm using Firefox for this purpose.

You can also check the jquery documentation on this topic.

Answer 2

It could have been a bug in earlier jQuery versions, up to this Github PR: https://github.com/jquery/jquery/pull/3741

Although it's 2019 now, I had to use jQuery 1.12.4 and noticed that width computation of a hidden (hidden by parent) element was always 100.

By debugging, I found that the jQuery outerWidth (similar for innerHeight, innerWidth, height, width, outerHeight and outerWidth) function will call the width cssHook, which in turn calls getWidthOrHeight(). getWidthOrHeight() may obtain a width in %, which is then returned as it is. The width function does not check what was returned and passes it through parseFloat, which results in the 100% becoming just 100.

Answer 3

One of options can be too, that parent element is not visible. Here is example: http://jsfiddle.net/nDMM3/

You can see, that jQuery return width = 100 (like 100%)

.test {
    border: 1px solid;
    cursor: pointer;
    height: 10px;
    position: relative;
    width: 100%;
    display:none;
}

#test2{
   width:100%;
}

<div id="test1" class="test">
   <div id="test2">
      Hello
   </div>    
 </div>   

 alert($('#test2').width());

Answer 4

That can be a co-incidence . According to the official documentation on api.jqery.com , it states that

Get the current computed width for the first element in the set of matched elements.

To confirm that you are getting the width in pixels , you can equate this value to .css(width) method of jQuery . It returns the width in pixels and hence , you can confirm that the return height is in Pixels.

Answer 5

Pls check the code appended below, I hope this is the simplest way to get the width from percentage to pixel.

HTML

<div id="test1" class="test">
 <p id="widthPx"> Perentage to Pixel : </p>
</div>

CSS

 .test {
  border: 1px solid;
  cursor: pointer;
  height: 100%;
  position: relative;
  width: 100%;
  padding: 10px;
}

JS

var widPx = $('#test1').width();
$('#widthPx').append(Math.round(widPx) + 'px');

OUTPUT

Perentage to Pixel : 609px

The output would be purely based on the div width.

Thanks.

Answer 6

Just an idea...don't hate. I know it doesn't cover every eventuality but something like this could check each of the items parents for the desired css rules (display:none; in this case). I got the idea from here.

The only problem is when a site gets more complicated...it becomes slow.

But it's a jumping off point.

//showing as 100%
alert($('#test2').width());
//use window.load to ensure .width() isnt doing anything funny
$(window).load(function(){
//checks to see if any of its parents have display:none; we can have multiple checks here if required
    if ($( "#test2" ).parents().css('display') == 'none') {
//iterate through each parent of the selected item  
        $( "#test2" ).parents().each(function () {
//only change the display value if the element has a display:none;
            if ($(this).css('display') == 'none') {
                $(this).css('display', 'block');
                alert($('#test2').width());//or whatever we want to do with this number
//reset values here       
                $(this).css('display', 'none');
           }
        });
    }
//showing as 100%
    alert($('#test2').width());
});