jQuery добавление к элементу css

Question

У меня есть идентификатор моего элемента. Мне нужно добавить заданное значение (определенное переменной в javascript) к одному из атрибутов css элемента. То есть задан элемент id=my_id Как добавить x к атрибуту этого элемента margin-top?

Answer 1

var x = 20; 
$('#my_id').css('margin-top', function(index, value) { 
    if (isNaN(parseInt(value))) 
     return x; 

    return parseInt(value) + x 
}); 

Answer 2

Один из подходов - use jQuery's .animate() method, но при условии, что он длится 0. Это позволяет вам отправить оператор += в виде строки и объединить значение x.

var x = 50; 

$('#my_id').animate({marginTop: '+=' + x}, 0); 

Другим способом было бы передать функцию в качестве второго параметра jQuery's .css() method. Возвращаемое значение будет текущим значением плюс x. Для этого требуется jQuery 1.4 или новее.

var x = 50; 

$('#my_id').css('margin-top', function(i,val) { return (parseInt(val) || 0) + x; }); 

Answer 3

var inc = 20; 
var mt = parseInt($('#my_id').css('margin-top').replace('px','')); 
$('#my_id').css('margin-top',(mt+inc)+"px"); 

Это предполагает, конечно, вы всегда использовать точки для Маржа волчка значений. Я использовал это надежно в течение некоторого времени.