像 '20px' 这样递增字符串。

Question

我需要一些东西来增加表示长度的字符串值（CSS边距）

当前的解决方案是：

function incPx(a,b){
     return parseInt(a) + parseInt(b) +'px';
}
incPx($(el).css('margin-left'), '10px')

也许有一个jQuery插件可以解决这个问题，可以与其他单位（如“px”）一起使用。

- user1125394

---

我修改了标题：字符串 -> CSS 值 - user1125394

Answer 1

使用 jQuery 1.6+ 版本，你可以像 .animate() 方法一样，通过 += 或 -= 来传递相对值给 .css() 方法：

$(el).css('margin-left', '+=10px');

- Matt Ball

Answer 2

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

来源：http://api.jquery.com/css/

- Tarik

Answer 3

其他人已经建议使用 jQuery.css() 的相对值，但请记住，您可以轻松地使用 parseInt 将类似 50px 的字符串转换为 Number，如下所示：

console.log(parseInt('50px', 10));
// 50

function incPx(a, b){
    a = parseInt(a, 10) || 0;
    b = parseInt(b, 10) || 0;
    return (a + b) +'px';
}​

不要忘记传递一个基数为10，更多示例：使用 parseInt（MDN）的示例

- Peter-Paul van Gemerden

---

我编辑了那个问题并提供了一个有用的提示，但是.css("margin-left", "+=10px") 正是我所需要的。 - user1125394

@cyril：我也是这么想的。不过别忘了 radix！如果你不指定，JavaScript 可能会为你选择一个（例如 8 或 16）。例如，08px 将变成 10，因为当字符串以 0 开头时，JS 默认使用 radix 8... - Peter-Paul van Gemerden

你的示例代码基本上与 OP 的问题代码相同，只是添加了一个基数 :) - Chris Baker

@Chris：是的，但你的也是，不是吗？ - Peter-Paul van Gemerden

@PPvG 是的，我的也是 :) 没有免费的方式来增加 "auto"，您需要先测量元素... 对于这个问题，我不会采取那种方式! - Chris Baker

parseInt()在这种情况下非常有用。感谢您提醒我们！+1 - Tarik

Answer 4

这里的其他答案讨论了“jQuery方式”，是完全有效的。然而，我想包括一种使用类似于OP正在使用的方法的方法，这也可以与“vanilla”javascript一起使用。

请注意，OP的代码将按原样正常工作 - 这基本上是相同的事情，只是更加关注提供默认值。

function incPx (val, amt) {
    var nv = parseInt(val.replace(/[^0-9]/, ''), 10);
    return (
        (nv ? nv : 0) + (amt || 1)
    )+'px';
};

console.log(incPx('10px')); // 11px
console.log(incPx('let us hasten to the zoo, post haste!')); // 1px
console.log(incPx('10px', 10)); // 20px
console.log(incPx('10px', -2)); // 8px

试一下：http://jsfiddle.net/jxU6Q/2/

文档

• MDN 上的 parseInt - https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/parseInt
• MDN 上的 String.replace - https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/String/replace

- Chris Baker

---

它很可能也是 jQuery 所做的。 - user1125394

@cyril 同意，类似的东西。不过我更喜欢尽可能使用原生代码，因为我想尽可能避免使用 js 库。你在这里得到了一些很好的 jQuery 特定答案，我想添加一个纯 JS 答案只是为了记录 -- 我假设你会使用基于 jQuery 的解决方案。 - Chris Baker