javascript - 如何使用 DOM 为 CSS 元素提供增量坐标？

Question

我是 JS 和 Web 开发领域的新手。我遇到了这个问题:

用 CSS 和 HTML 完成了猫捉老鼠的任务。我想要实现的目标是在 Y 轴 上以增量移动猫，使其与鼠标位于同一水平上，给人一种猫没有在鼠标上跳跃的印象马上。

最终会的，但目前，我希望猫从 100 top 移动到 300 top，然后从 300 top 到 600 top，这是鼠标在 Y 轴 上的坐标。这是我的 js 文件，但它似乎不起作用，猫转到 300 top 并坐在那里，所以我想我应该在 Stack 上寻求帮助和你们在一起:-)。

你能帮助任何人吗？谢谢

document.addEventListener("DOMContentLoaded", () => {
  const $cat = document.querySelector("#cat");

  setInterval(() => {
    var currentPosition = $cat.style.top;
    var newPosition;
    var direction = 200;
    if (currentPosition <= 100) {
      direction = 200;
    } else if (currentPosition <= 300) {
      direction = 300;
    }
    newPosition = currentPosition + direction;
    $cat.style.top = newPosition + "px";
  }, 1000);
});

Answer 1

已修复并清理。问题是$cat.style.top是一个字符串，并且您尝试添加一个连接它们的字符串。这导致无法识别 css 属性，因此该项目被卡住。

document.addEventListener("DOMContentLoaded", () => {

    const cat = document.querySelector("#cat");
    const regEx = /\d+/ // matches all digits
    let direction, currentPosition = 0;


    setInterval(() => {

        currentPosition = regEx.exec(cat.style.top)[0]

        if (currentPosition <= 100) {
            direction = 200;
        } else if (currentPosition <= 300) {
            direction = 300;
        } else {
            console.error(`skipped if statements oO`)
        }
        cat.style.top = (currentPosition + direction) + "px";

    }, 1000);
});

对于所有害怕正则表达式的人来说，有一个String.substring()函数也可用于删除 cat.style.top 末尾的 px 部分