Set the width as a percentage, but want to get it in pixels

Question

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

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

I displayed my HTML id and its CSS. Now when I do $('#test').width() , I get 100 . I want its width in pixels (not in % ).

Can anyone tell how to get the width in pixels?

Answer 1

.width() gets the "... current calculated width" of the element, which is used in the jQuery width documentation: http://api.jquery.com/width/ , so the return value is from $('#heatMapBar').width() is in pixels, not percentage. I would suggest using a developer tool to check the width, maybe in the current #heatMapBar context its width is 100 pixels.

If you look here: http://jsfiddle.net/NkQXa/1/ , you will see that #test set to width:50%; but it warns of the actual width of the pixels.

Answer 2

One of the parameters may be too much, this parent element is not displayed. Here is an example: http://jsfiddle.net/nDMM3/

You can see that jQuery return width = 100 (e.g. 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 3

There may be a problem with multiple divs having a percentage width:

 <div style="width: 50%"> <div id="getMyWidth" style="width: 100%"></div> </div> 

In this case, it returns 100 as the width for the inner div for me. I solved this by taking the width of the outer div.

Answer 4

Based on Honzik's answer, this is a small workaround if the element needed to indicate its width is inside the hidden parent element.

 function getWidth(elemID) { // get parent element unique id (must have) var parentId = $("#"+elemID).parent().prop("id"); // remove the child element based on the specified element id $("#"+elemID).remove(); // append a new child element but on body where most probably is not set to "display:none" $("body").append('<div id="'+elemID+'">Hello</div>'); // get the width of the newly appended child element and store it to a variable var width = $("#test2").width(); // remove child element from body $("#"+elemID).remove(); // re-append child element to its former position under former parent element (having CSS attribute "display:none") $(parentId).append('<div id="'+elemID+'">Hello</div>'); // display stored element width alert(width); } // usage to get the element width getWidth("test2"); 

Try this in the next snippet!

 function getWidth(elemID) { var parentId = $("#"+elemID).parent().prop("id"); // your parent element should have a unique id specified $("#"+elemID).remove(); $("body").append('<div id="'+elemID+'">Hello</div>'); var width = $("#test2").width(); $("#"+elemID).remove(); $(parentId).append('<div id="'+elemID+'">Hello</div>'); alert(width); } getWidth("test2"); 

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

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="test1" class="test"> <div id="test2"> Hello </div> </div> 

Answer 5

It could be a coincidence. According to the official documentation of api.jqery.com , it says

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

To confirm that you get the width in pixels, you can equate this value with the .css (width) jQuery method. It returns the width in pixels and therefore you can confirm that the return height is in pixels.

Answer 6

Just an idea ... don't hate it . I know that this does not apply to every probability, but something like this can check each of the parent elements for the desired CSS rules (display: none; in this case). I got an idea from here .

The only problem is that the site is becoming more complex ... it is becoming slow.

But this is a jumping 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()); }); 

Answer 7

Another solution without jquery is to use the clientWidth property available in HTMLElements

 document.getElementById('test1').clientWidth 

Answer 8

I'm not sure about this, but $("#id/.class").width() gives the pixel value in my case.

In the above screenshot, you can find different values ​​of $("#id/.class").width() in pixels at different browser screen sizes.

Well, I use Firefox for this purpose.

You can also check the jquery documentation on this topic.

Answer 9

Check out the code below, I hope this is the easiest 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

Pixel Transition: 609px

The output will be based only on the width of the div.

Thank.

Answer 10

This could be a bug in earlier versions of jQuery, down to this Github PR: https://github.com/jquery/jquery/pull/3741

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

By debugging, I found that the externalWidth jQuery function (similar to innerHeight, innerWidth, height, width, outerHeight and outerWidth) would call width cssHook, which in turn would call getWidthOrHeight (). getWidthOrHeight () can get the width in%, which is then returned as is. The width function does not check what was returned, and passes it through parseFloat, resulting in a value of 100% becomes 100.

Answer 11

I think this should work, but if for some reason it keeps giving you the width%, then you can get the width and then divide it by the width of the window

 var widthInPx = $(widnow).width()/$('yourElement').width