I have a syntax issue as I want to do something quite simple. Apply a negative value to a variable using .css.

Here yo have the code:

var figureImage = $('.js-image-centering');
var figureImageHeight = figureImage.height();
var figureImageWidth = figureImage.width();
var figureImageMarginLeft = (0-(figureImageWidth/2));
var figureImageMarginTop = (0-(figureImageHeight/2));

figureImage.css('margin-left', figureImageMarginLeft);
figureImage.css('margin-top', figureImageMarginTop);

I would like to forget about figureImageMarginLeft and figureImageMarginTop. So, its it possible to something like this?

figureImage.css('margin-left', -figureImageMarginLeft);

How do you write it correctly?

I have a syntax issue as I want to do something quite simple. Apply a negative value to a variable using .css.

Here yo have the code:

var figureImage = $('.js-image-centering');
var figureImageHeight = figureImage.height();
var figureImageWidth = figureImage.width();
var figureImageMarginLeft = (0-(figureImageWidth/2));
var figureImageMarginTop = (0-(figureImageHeight/2));

figureImage.css('margin-left', figureImageMarginLeft);
figureImage.css('margin-top', figureImageMarginTop);

I would like to forget about figureImageMarginLeft and figureImageMarginTop. So, its it possible to something like this?

figureImage.css('margin-left', -figureImageMarginLeft);

How do you write it correctly?

• javascript
• jquery
• css
• margin
• negative-number

• 1 you dont need to do (0-(figureImageWidth/2)), doing -figureImageWidth/2 is fine. – Ashish Kumar Commented Jan 30, 2014 at 10:40
• If you dont know that figureImageMarginLeft is -ve or +ve, then you can do, -Math.abs(figureImageMarginLeft) to get negative number always. – Ashish Kumar Commented Jan 30, 2014 at 10:43
• @AshishKumar This worked perfectly, but I would like to know for a future how to apply this negative value on the .css field if I need it. – Daniel Ramirez-Escudero Commented Jan 30, 2014 at 10:43
• @AshishKumar Steve Robinson answer was the correct one, but I would like to know what method would be better for speed quality or best practices – Daniel Ramirez-Escudero Commented Jan 30, 2014 at 10:45
• 1 In jQuery you dont need to specify px as unit for .css() or .animate() or .height() etc. – Ashish Kumar Commented Jan 30, 2014 at 10:54

4 Answers 4

Yes Absolutely. If you do,

var a = 100;
$(".stuff").css("margin-left",-a)

the element would get the rule: margin-left: -100px

What about figureImage.css('margin-left', "-" + figureImageMarginLeft + 'px');?

You can just do this:

var mL = -30;
$("div").css("marginLeft", mL + "px");

Fiddle

That will do the trick (will make positive values negative and negatives positiv):

figureImage.css('margin-left', -figureImageMarginLeft+"px");

or, if you want it to be always negative:

figureImage.css('margin-left', -Math.abs(figureImageMarginLeft)+"px");

always positiv:

figureImage.css('margin-left', Math.abs(figureImageMarginLeft)+"px");

example: http://jsfiddle/rN3cw/