How to get the value from css of "div" tag using jQuery?

Question

Ex:

<div id="h" style="background-image:url('images//line.jpg'); background-repeat: repeat-x; width:300px; height:25px; padding-left:10px; color:white;">Frame</div>

Now, I want to get the value of width from style using jQuery. What should be jQuery.

Answer 1

Use the css method:

$("#h").css("width");

Using the css method and the property name of width will give you the actual css result, as apposed to width() which will give a unitless result.

From the width docs:

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).

Answer 2

$('#h').width()   //  from jQuery dimensions (core)

or

$('#h').css('width');

.width() returns the calculated width. .css('width') just returns whatever you've written into the style. So in general, it's a better idea to stick with .width() unless you really want to know the actuall value.

If you need the width of an element in more "detail", check out the .innerWidth() and .outerWidth() methods from jQuery dimensions. Those calculate the width with padding, borders, padding etc.

Ref.: .width(), .css(), .outerWidth(), .innerWidth()

Answer 3

Use either

$('#h').width();

or

$('#h').css('width');

The latter returns the unit value (eg 300px), the former just a value (300).

See jQuery Width() API

Answer 4

The css method:

var width = $('#h').css('width');

Answer 5

You could use jQuery like this:

alert($("#h").css("width"));

To play a little with jQuery you should use...

http://jsfiddle.net/WEWVp/