jQuery .css() function with variables and multiple values

Question

Weird little snafu. I'm using jQuery's .css() method to change the size of text (long story; no, I can't use media queries) using a variable and I need to add em to it. I'm not sure what the syntax is because there are multiple values for the CSS change.

To illustrate:

This works perfectly. It adds em to the calculated value of victore:

$('h1').css('font-size', victore + 'em');

This doesn't:

$('h1').css({
    'font-size':victore + 'em',
    'line-height':vignelli + 'em';
});

The em needs quotes... but so does the value. Wrapping it in parens didn't work

On your most recent edit you need to remove the ; after the last em. — ThinkingStiff
– ThinkingStiff, Commented Dec 11, 2011 at 5:10

James Montagne · Accepted Answer · 2011-12-11 04:55:25Z

19

You shouldn't have the quotes around the whole thing:

$('h1').css({
    'font-size': victore + "em",
    'color':'red'
});

answered Dec 11, 2011 at 4:55

James Montagne

78.9k14 gold badges115 silver badges132 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

technopeasant Over a year ago

gotcha. made a mistake when I copied over my code. see above edit.. it breaks my code.

James Montagne Over a year ago

As pointed out in the comments, you now have a semicolon that shouldn't be there.

Brigand · Accepted Answer · 2011-12-11 04:57:37Z

1

Here's a fiddle.

$('h1').css({
    'font-size':victore + "em",
    'color':'red'
});

answered Dec 11, 2011 at 4:57

Brigand

86.4k20 gold badges167 silver badges174 bronze badges

2 Comments

technopeasant Over a year ago

Ah I see. I made a mistake when I copied the code over.. Please see edited post for a different example of what doesn't work. Tried it in your fiddle and no dice

Brigand Over a year ago

@technopeasant, see the updated fiddle. I used pixels instead of ems for the example. EDIT: Here's a version with em: jsfiddle.net/sPEVs/2

Phil Klein · Accepted Answer · 2011-12-11 04:55:59Z

0

The font-size value is required to be a string, but that string can be the result of an expression, in your case victore + 'em' should result in the appropriate string.

$('h1').css({ 
    'font-size': victore + 'em', 
    'color': 'red' 
});

answered Dec 11, 2011 at 4:55

Phil Klein

7,5143 gold badges34 silver badges33 bronze badges

Collectives™ on Stack Overflow

jQuery .css() function with variables and multiple values

3 Answers 3

2 Comments

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related