Extend Existing CSS style by percent- % using JQuery

Question

I am trying to extend an existing css style by 1%, using the following code, but instead its being increment in pixels instead of %.So instead of giving - 7%, its giving me it as 7px.

$("#label").css("top", "+=1%");

The top most div is of size - width: 100%; and the label top : 6% which is already defined.

Any idea/suggestion on this would be really helpful

Answer 1

You can try to get the current top property value, and then add 1%;

var currentTop = $("#label").css("top");
var topAdded = parseInt(currentTop.replace("%","")) + 1;
$("#label").css("top", topAdded + "%");

Answer 2

You can do this:

var top = parseInt($("#label").css("top").replace("%", ""));
top ++; 
$("#label").css("top", top+"%")

Update:

For one line statement you can do this:

 $("#label").css("top", (parseInt($("#label").css("top").replace("%", "")+1)+"%")