Strange syntax in Novice to Ninja to set css property?

JavaScript
1

Dear forum people,
I am working through the book jQuery, Novice to Ninja. at page 88 i saw a piece of code that does not seem logic to me:
They want to set css property ‘width’.

i see in the code:

divTwo.css(‘width’, divTwoWidth + ‘px’);

earlier in the book i learned that if you want to set css properties, i should expect a syntax like this:

divTwo.css(
{‘width’:‘divTwoWidth + ‘px’’}); or divTwo.css(‘width’, ‘divTwoWidth + ‘px’’);

i do not understand why there are no ‘’ around the value, the divTwoWidth ?

Thanks for any help,

2

divTwoWidth is a variable, that has value set earlier. When setting the width of this element, you want to set it to the value recorded earlier in the divTwoWidth variable. To do that, you need to access the variable itself. If you put the variable in quotes, you get a string with the value ‘divTwoWidth’, which is something else entirely.


var divTwoWidth=200;
divTwo.css('width', divTwoWidth + 'px');

That will set the width of divTwo, because the value of divTwoWidth is 200.

Had you used (incorrect) the string variant, you’d have


var divTwoWidth=200;
divTwo.css('width', 'divTwoWidth + px');

set the width to ‘divTwoWidth’, but ‘divTwoWidth’ is not a number, so the expression is wrong (and will probably set the width to 0 since the string ‘divTwoWidth’ is 0 when cast to an integer).

Does that make sense?

3

Thanks a lot! Now i know how to use a variable as a value to set a css propterty. Thanks for good explanation.