javascript - Javascript：不能覆盖串联

Question

使用下面的代码，我想用id='seekline'by移动一行var1（在大多数情况下小于 .1），但是我在添加var1and时遇到了麻烦j。

加号连接而不是添加。我尝试使用Number(), parseInt(), parseFloat(), 并通过乘以 1 或加 0 来强制加法。由于某种原因，我无法停止连接。当我使用parseInt()或parseFloat()（例如parseInt(j,10)）代码停止工作。

字符串拆分是删除pxfrom element.style.left。

function move(var1) {
    element = document.getElementById('seekline');
    console.log(var1, element.style.left);
    var str=(element.style.left);
    var n=str.split("p");
    var j = n[0];
    Number(j);
    Number(var1);
    var k = var1 + j;
    var f = k.concat("px");
    console.log(j, k, f);
    element.style.left = f;
}

Answer 1

function move(var1) {
    var element = document.getElementById('seekline'),
        left    = parseInt(element.style.left.replace('px',''),10);

    element.style.left = ((left++) + var1) + 'px';
}

Answer 2

使用从 JavaScript 获得的数字的秘诀是删除字符串 'px' 并将它们转换为数字：

parseInt(element.style.left.replace('px', ''))

Answer 3

您需要将调用结果分配给Number()，因为它返回传递的字符串的数值，而不是修改变量本身。

请注意，+foo这与做Number(foo).

function move(var1) {
  var style = document.getElementById('seekline').style;

  // removes last two 'px' characters
  var oldValue = +style.left.slice(0, -2);

  // converts to number type, then adds 2 to it
  var1 = +var1;
  var1 += 2;

  // check to see if number is NaN or +/-Infinity
  if (isFinite(var1)) {
    // only now string concatenates the term 'px' to it
    element.style.left = oldValue + var1 + 'px';
  }
}