Resizing Elements in jQuery

You might have expected a simple utility method for resizing an element but there isn’t one. The $.resize() method is a handler for the onresize event. Unless you’re using $.animate(), you’ll have to code your own.

To resize an element just change its height and width attributes using $.css(). For example, to shrink the width of an existing element you could do the following:

var w = $(“#myElem”).css(“width”);

w = parseInt(size.replace(“px”,””)) – 10;

$(“#myElem”).css(“width”, w-10);

But this has the inherent disadvantage of returning a string with a unit, for example, pixels. By using the $.height() and $.width() methods, you can get the height and width of an element, making it easier to resize:

var w = $(“#myElem).width() – 10;


Source: Otero Cesar, Rob Larsen (2012), Professional jQuery, John Wiley & Sons, Inc

Leave a Reply

Your email address will not be published. Required fields are marked *