Question

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

目前的解决方案是：

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

但也许有一个jQuery的东西呢？与'px'

的其他单位合作

Answer 1

使用jQuery 1.6+，您可以将相对金额传递给.css()，由+=或-=表示，类似于.animate()：

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

Answer 2

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

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

Answer 3

这里讨论“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/

<强>文档

parseInt - https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Global_Objects/parseInt
String.replace - https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Global_Objects/String/replace

Answer 4

其他人已经提出了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 radix。更多示例：Example: Using parseInt (MDN)

增加像'20px'这样的字符串

4 个答案: