JQuery .css（）返回100％为100px

Question

<style>
.info{
        width:94%;
      }
</style>

Now doing like this using JQuery

$('.info').css('width');

returns 94px rather than the equivalent value in pixles ( 500px in my case.)

if i set the width in css as 105% , JQuery would return it as 105px .

The height and width of the parent container is 600px and 500px respectively.

Answer 1

I think a possible cause is the container of the element being hidden at the moment you're trying to obtain the dimensions.

I had a similar situation with nested divs and tables.

See the following fiddle where I managed to reproduce the behavior:

http://jsfiddle.net/36yvb/

I still think it's a bug in jQuery returning a percentage as an integer number (without the % sign) when not being able to actually compute the dimensions of the element. Change the width of #another-cell (expressed in %) and see it return the same value without the % sign when the table is hidden.

Answer 2

Actually, it doesn't seem so: see this fiddle .

html:

<div id="info"></div>

css:

html, body {
    position: relative;
    width: 500px;
}

#info {        
    width: 94%;
}

js:

$( function() {
    document.write( $('#info').css('width') );
});

what is info width relative to? is it an element with 100px width maybe?

Answer 3

The width that it returns depends upon what part of the HTML is it written in. Meaning to say is that if it is written inside tag then then 94% percent would reflect 94% of that particular div.

But again if another tag in the same tag is already using some amount of defined width then the info might even get lesser space if the tag in defined before the info tag.

Please give up more amount of actual code to get a better answer

Answer 4

The only thing that explains this behavior is that you have more than one element with the class info

When this happens and you do a $('.info').css('width'); jQuery will return to you the width of the first element in the set.

If this is the case, you may need to be more specific with your selector.

DEMO

Answer 5

Each broswer will return textually different, but logically equal values eg, #FFF, #ffffff, and rgb(255,255,255) when using .css()

Instead of using .css('width') use .width()

According to jQuery: http://api.jquery.com/width/

The difference between .css(width) and .width() is that the latter returns a unit-less pixel value (for example, 400) while the former returns a value with units intact (for example, 400px). The .width() method is recommended when an element's width needs to be used in a mathematical calculation.