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 width to 100px then

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

Then what is the difference?

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

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

alert($('#dvText1').css('width'));

This return '100px'.

alert($('#dvText2').width());

This returns 100.

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

See live Demo and Code

The same difference is with height and css('height').

Feel free to contact me for any help related to jQuery. I will gladly help you.



Responsive Menu
Add more content here...