向jquery.css()left属性添加像素

Question

这是我的代码：

var lef=$(this).css("left");
var top=$(this).css("top");
alert(lef);
$(this).after("<div class='edit cancel' style='position:absolute;top:"+top+";left:"+lef+"'>Cancel</div>");

现在语句var lef=$(this).css("left") + 150似乎不起作用。我想得到左边的属性，并添加150像素到它

我该怎么做？

谢谢。

Answer 1

从jQuery 1.6开始，您可以通过简单地添加或减去当前值来最容易地做到这一点。例如，要添加150px：

$(this).css("left", "+=150")

http://api.jquery.com/css/#css-属性

从jQuery 1.6开始，.css((接受类似于.animate((。相对值是以+=或-=到开头的字符串递增或递减当前值。例如，如果元素padding left为10px，.css("padding left"，"+=15"(将导致总共剩下25像素的填充。

Answer 2

以下是最简单的方法(对于一般情况(：

$(this).css('left', '+=150');
$(this).css('top', '-=100');

http://api.jquery.com/css/#css-属性

从jQuery 1.6开始，.css()接受类似于.animate()。相对值是以+=或-=开头的字符串以增加或减少当前值。例如，如果元素的左侧填充为10px，.css( "padding-left", "+=15" )将导致总共剩下25像素的填充。

---

如果您需要"手动"(例如，作为创建新元素的一部分(：

var left = parseInt($(this).css('left')) + 150;
var top = parseInt($(this).css('top'));
$(this).after('<div style="top: ' + top + 'px; left: ' + left + 'px; position: absolute">Cancel</div>');

您需要使用parseInt，因为.css('left')返回150px。然后，您必须将px作为内联样式的一部分放回原处。

Answer 3

我已经简化了第三个点的答案。您可以将此jQuery函数用于任何要添加像素的属性。

jQuery.fn.addPixelsTo = function(property, pxls) {    
     return $(this[0]).css(property, (parseInt($(this[0]).css(property).substr(0,2))+pxls)+'px');
}

示例：

$('#element').addPixelsTo('border-top-width', 30);

Answer 4

尝试这个

var WinW=jQuery(window).width();
var lft =parseInt(WinW/2);
jQuery(".div").css("left" , (lft));

它会将div放在页面的中心，然后它就会正常工作。。。。

Answer 5

可以尝试

$(this).css("left", function(){
return ($(this).css("left")+150);
});

对于任何复杂的修改以及

Answer 6

var lef=$(this).css("left")

这一行返回一个字符串，通过+运算符将150与该字符串连接起来。您需要先将$(this).css("left")字符串转换为数字。

一个jsfiddle演示来证明我的观点。

所以，你可以通过以下方式来做到这一点-

var lef = partInt($(this).css("left")) + 150;

现在您将获得加法而不是字符串串联。