JQuery: width() vs css('width') and height() vs css('height')

jQuery provides two ways to set width and height of any element. You can set using css or you can use jQuery provided methods.

 If you want to set the width or height of any DOM then

$('#div_1').css('width','100px');
$('#div_1').width(100); 


Then what is the difference?

The difference lies in datatype. As its clear in code that with width() method you need to append 'px' to the width value and with css('width') you don't need to specify.  


When you want to read width of any element then css('width') method will return you string value like '100px' while width() will return an integer value.

$('#div_1').css('width'); // will return '100px'


$('#div_1').width(100);  // will return 100

So if you want to do any kind of manipulation then width() function is the best option.


note: same with the height() and css('height') methods.