jQuery添加两个CSS属性值

时间:2012-01-16 15:18:26

标签: javascript jquery math

我试图获得元素的顶部位置和边距底值 有效:

var top = -$('elem').postion().top; // lets say its -54
var margin = $('elem').css('margin-top'); // lets say its 0

Bud我需要为我的动画功能添加它们。所以top+margin但是jQuery给出-540 px但是它需要返回-54 px ..或者当它为负时它只需要-54-10px,当我需要-64 px时。

有什么可以解决这个问题吗?我无法忍受它,它让我很烦恼!

我的代码:

var top = -$('#id1').position().top;
var margin = $('.scrollable').css('margin-top');

var combine = top+margin;

$('.animate').animate({'margin-top' : combine});

3 个答案:

答案 0 :(得分:6)

  

Bud我需要为我的动画功能添加它们。所以top + margin但jQuery给出540 p

css值是字符串,因此,由于其中一个操作数是字符串,因此+被解释为连接运算符(54 + "0" = "540"),而不是加法运算符。 (Details)要将它们转换为数字,请使用parseInt(str, 10),例如:

// I believe `top` will already be a number; check and if not, use parseInt here too,
// e.g. var top = -parseInt($('#id1').position().top, 10);
var top = -$('#id1').position().top;

// This will definitely be a string that needs parsing; note that we're assuming
// here that the margin has been given in `px` units.
var margin = parseInt($('.scrollable').css('margin-top'), 10);

// Now this + is an addition, not a concatenation    
var combine = top+margin;

$('.animate').animate({'margin-top' : -combine});

答案 1 :(得分:3)

这是因为它将值作为字符串返回,并使用它们上的+运算符连接。您可以使用parseInt从字符串中获取数字。如果有px后缀,它甚至会起作用,但它会停在那里。

var top = $('elem').postion().top;
var margin = $('elem').css('margin-top');

var total = parseInt(top, 10) + parseInt(margin, 10);

答案 2 :(得分:0)

试试这个

var combine = parseInt(top) + parseInt(margin);