使用 jquery 增加 css 顶部属性答案

【问题标题】：Increment css top property using jquery使用 jquery 增加 css 顶部属性
【发布时间】：2014-04-28 21:03:25
【问题描述】：

我有以下 div：

<div id="new" style="position: absolute; z-index: 100; top: 210px; width: 195px..

当事件发生时增加top 属性的最佳方法是什么？

请注意，我已经尝试过：$('#new').css('top')+10，但问题是 .css 返回字符串。

【问题讨论】：

标签： jquery css

【解决方案1】：

最简单的方法是使用+= 运算符：

$( '#new' ).css( 'top', '+=10px' );

【讨论】：

【解决方案2】：

您可以使用parseFloat function 仅获取初始数字部分并将其从字符串转换为数字。例如：

var n = $('#new');
n.css('top', (parseFloat(n.css('top')) + 10) + 'px');

附带说明，如果您想同时更改多个元素的位置，可能是：

$('.someClass').css('top', function(i, v) {
    return (parseFloat(v) + 10) + 'px';
});

但是，如果您只是想随着时间的推移为元素设置动画，请查看 jQuery 的 .animate method。

【讨论】：

【解决方案3】：

var el = $('#new');
el.css('top', (parseInt(el.css('top'), 10) + 10) + 'px');

【讨论】：

【解决方案4】：

我会说创建一个变量，增加变量，然后使用新值重置属性，就像这样

var topProperty = 0;   //You can also populate this variable with the current value.

然后在您的点击事件中

{
topProperty += 10;
$('#new').css('top', topProperty + 'px');
}

【讨论】：

【解决方案5】：

var New = $("#new");

function onEvent()
{
   New.css("top", parseFloat(New.css("top")) + 10 + "px");
}

通过将 seconds 参数添加到 css 来设置属性。

【讨论】：