JavaScript 在键盘按钮按下时更改元素位置

Question

所以我想在按下键盘按钮时将元素的位置更改 100。
我的代码：

document.addEventListener("keypress", (event) => {
    var keyName = event.key;
    if (keyName == "s") {
        console.log(keyName);
        document.getElementById("element").style.top + 100;
    };
}, false);

<div id="element">•</div>

代码所做的唯一一件事就是将有关按下的键的日志发送到控制台。

编辑：元素的位置已经是绝对的

position: absolute;

Answer 1

要实现您的目标，您必须执行以下操作：

1. 您的元素必须是position: absolute或position: relative
2. style.top是一个setter，所以你必须设置它的值，比如style.top = '100px'
3. 顶部值是在顶部添加 100 的字符串，您需要将其解析为字符串，然后在字符串末尾添加回“px”

 document.addEventListener("keypress", (event) => { const elementToMove = document.getElementById("element"); var keyName = event.key; if (keyName == "s") { elementToMove.style.top = (parseInt(elementToMove.style.top || 0) + 100)+'px'; }; }, false);

 <div id="element" style="position: absolute;">•</div>

Answer 2

top CSS 属性参与指定定位元素的垂直位置。 它对非定位元素没有影响。 确保您的元素已定位（绝对、相对、固定、静态等...）。

你的代码在这里有问题： document.getElementById("element").style.top + 100; 应该分配给元素 (+100) 将不起作用。

如果要添加边距，请执行以下操作： document.getElementById("element").style.marginTop = "100px";