+= operator within .css method in jQuery

Go To StackoverFlow.com


Is there any way to achieve a += operator within the css operator (assuming ui.value in the example has a numerical value)

Something like this(which doesn't work):

$("#resume_holder").contents().find('body').children().css('font-size', +=ui.value);
2012-04-03 20:13
by jsuissa
@MatthewBlancarte Not like that either - iambriansreed 2012-04-03 20:17



    .css('font-size', '+=' + ui.value);

(if you're using jQuery >= 1.6)

according to the docs for css:

As of jQuery 1.6, .css() accepts relative values similar to .animate(). Relative values are a string starting with += or -= to increment or decrement the current value. For example, if an element's padding-left was 10px, .css( "padding-left", "+=15" ) would result in a total padding-left of 25px.

Example: http://jsfiddle.net/JMRPf/ (trivial I know, but proof that it works)

2012-04-03 20:15
by Andrew Whitaker
Neat. I always thought you has to put in a unit when changing css values such as font size. But apparently it assumes the unit type already set. Is this documented anywhere - iambriansreed 2012-04-03 20:37
Yea that did it -- pretty cool. I should have tried that I just assumed that it wouldn't work - jsuissa 2012-04-03 21:25


You could keep the actual value of font-size into a variable, add the ui.value, and asign it back:

var crtFontSize = parseInt($("#resume_holder").contents().find('body').children().css('font-size'));
crtFontSize += ui.value;
$("#resume_holder").contents().find('body').children().css('font-size', crtFontSize + 'px');
2012-04-03 20:16
by gabitzish
Thanks -- While .css() accepts +=, it does not accept *= -- so this was great - jsuissa 2012-04-04 03:31


You could use the animate method of jquery, but that would display the result gradually.. is that a problem?

$("#resume_holder").contents().find('body').children().animate('font-size', ui.value);

That would change the current font size, to what ui.value contains.

2012-04-03 20:15
by Deleteman


Short answer, no.

However this can be accomplished as follows (untested):

$("#resume_holder").contents().find('body').children().each(function() {
    $(this).css('font-size', $(this).css('font-size') + ui.value);
2012-04-03 20:16
by Keith


Not sure about css but you can try to implement it using animate method.

.animate({ fontSize: '+='+ui.value });
2012-04-03 20:16
by ShankarSangoli