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

adding pixels to jquery .css() left property

提问by Hormigas

This is my code:

这是我的代码：

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>");

Now the statement var lef=$(this).css("left") + 150, doesn't seem to work. I want to get the left property and add 150 pixels to it

现在声明var lef=$(this).css("left") + 150, 似乎不起作用。我想获得 left 属性并为其添加 150 像素

How can i do this ?

我怎样才能做到这一点 ？

Thanks.

谢谢。

回答by mayatron

As of jQuery 1.6, you can do this most easily by simply adding or subtracting from the current value. For example, to add 150px:

从 jQuery 1.6 开始，您可以通过简单地添加或减去当前值来最轻松地完成此操作。例如，要添加 150px：

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

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

http://api.jquery.com/css/#css-properties

http://api.jquery.com/css/#css-properties

As of jQuery 1.6, .css() accepts relative values similar to .animate(). Relative values are a string starting with += or -= to increment or decrement the current value. For example, if an element's padding-left was 10px, .css( "padding-left", "+=15" ) would result in a total padding-left of 25px.

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

回答by thirtydot

Here's the easiest way (for the general case):

这是最简单的方法（对于一般情况）：

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

http://api.jquery.com/css/#css-properties

http://api.jquery.com/css/#css-properties

As of jQuery 1.6, .css()accepts relative values similar to .animate(). Relative values are a string starting with +=or -=to increment or decrement the current value. For example, if an element's padding-left was 10px, .css( "padding-left", "+=15" )would result in a total padding-left of 25px.

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

---

---

If you need to do it "manually" (for example, as part of creating a new element):

如果您需要“手动”执行此操作（例如，作为创建新元素的一部分）：

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>');

You need to use parseIntbecause .css('left')returns 150px. You then have to put back the pxas part of the inline style.

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

回答by optimista

I've simplified thirtydot answer. You can use this jQuery function for any property you want to add pixels.

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

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

Example:

例子：

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

回答by san

try this

尝试这个

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

it will put the div in center of a page, then it will work fine....

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

回答by Varun

can try

可以尝试

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

for any complex modification as well

也适用于任何复杂的修改

回答by MD Sayem Ahmed

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

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

This line is returning a string, with which you are concatenating 150by the +operator. You need to convert the $(this).css("left")string to number first.

此行返回一个字符串，您正在150由+运算符连接该字符串。您需要$(this).css("left")先将字符串转换为数字。

A jsfiddledemo to prove my point.

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

So, you can do this in the following way -

因此，您可以通过以下方式执行此操作 -

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

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

Now you will get addition instead of string concatenation.

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