How to get the authored style properties of an element?

Question

I am using jQuery to animate elements on my page.

In order to re-initialize the position of all my elements at the end, I need to get the authored properties of my elements, specified in % in my stylesheet.

I first used the .css() function but it is giving me the computed value, which I don't want. I am looking for the values I declared in the CSS (percent or pixels).

Any ideas on how to get that?

Answer 1

The solution is to use .position() instead of .css('top') or .css('left'), then convert the values into percents.

Answer 2

@CécileBoucheron

Take a look at this Fiddle and see if it gives you some idea on how you can approach your exact situation.

This isn't perfect, if you declared the original position using a % value, jQuery returns the element's pixel location so it likely won't be adequate if your design needs to be responsive.

An interesting thing to note, if your element is initially hidden - display:none - and before you show the element you record its original CSS declared position, you will get the %age value declared in the CSS style. Might work in your case?

Cheers!