如何使用jQuery从“ div”标签的CSS中获取值？

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

$('#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 2

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

css方法：

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/