How to add height to existing height?

Question

For example I want to add 20px to <div id='example'></div>, which is currently 20px.

I could get the existing height and add 20px and input it as the new height, but I wish to learn if there is a better way that might work like a += operator.

Answer 1

There are many ways to do it: http://jsperf.com/jquery-height-vs-css-height

jsbin.com/utaduy

$('#example').css( "height", "+=20px" );

---

$('#example').height( $("#example").height() + 20 );

Answer 2

You can pass a function into height() that has the element's current height as an argument and the return of the function will be the new height:

$('#example').height(function (index, height) {
    return (height + 20);
});

Here is a demo: http://jsfiddle.net/grajh/

Docs: http://api.jquery.com/height/