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>

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

编辑：元素的位置已经是 Absolute

position: absolute;

Answer 1

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

您的代码在这里有错误： document.getElementById("element").style.top + 100; 应该对元素 (+100) 进行赋值将不起作用。

如果您想增加保证金，请执行以下操作： document.getElementById("element").style.marginTop = "100px";

Answer 2

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

您的元素必须是 position: absolute 或 position: relative
style.top 属性是一个 setter，因此您必须将其值设置为 style.top = '100px'
top值是一个字符串，在上面加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>

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

JavaScript change element position on keyboard button press

html

javascript

position

keypress