css attribute value to have the same value as another css attribute value multiplied by 2

Question

I am trying to achieve this effect using jQuery and it has been giving me a bit of trouble:

I would like a css attribute value to have the same value as another css attribute value multiplied by 2.

In more detail, I would like a margin-left value which is set as a percentage to have the same value as a margin-top value multiplied by 2.

I would appreciate any help.

I think you should read about LESS CSS.. That will make it possible to handle variables and much more.. :) — denlau
– denlau, Commented Sep 27, 2013 at 0:16
Also, check out CSS calc() developer.mozilla.org/en-US/docs/Web/CSS/calc — Josh Crozier
– Josh Crozier, Commented Sep 27, 2013 at 0:22

thiagobraga · Accepted Answer · 2013-09-27 00:40:26Z

1

Like denlau says, you should use LESS, or like JoshC says, use the CSS3 property calc(). But in jQuery, you could use:

var element = $('#element'),
  marginTop = parseFloat(element.css('marginTop'));

element.css('marginLeft', 2*marginTop);

answered Sep 27, 2013 at 0:40

thiagobraga

1,5712 gold badges16 silver badges32 bronze badges

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

6 Comments

Not exactly... that would change the style attached to #element, but wouldn't change the css value of the underlying style.

You want to edit in CSS, not in jQuery so. For this, you could use LESS or calc().

Who are you talking to? If you type here, I'm the only one getting notified.

Sorry, I thought it was user2812034 who was commenting. But I didn't understand your comment. I think is the approach he is seeking.

I mean if you .css an element, the styles will be attached to the element. The actual style (e.g. #element { something }) is not changed.

|