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

【问题标题】：JavaScript change element position on keyboard button pressJavaScript在键盘按钮按下时更改元素位置
【发布时间】：2023-04-01 09:38:01
【问题描述】：

所以我想在按下键盘按钮时将元素的位置更改 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;

【问题讨论】：

标签： javascript html position keypress

【解决方案1】：

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

您的元素必须是position: absolute 或position: relative
style.top 属性是setter，因此您必须设置它的值，例如style.top = '100px'
顶部值是一个字符串，要在顶部添加 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);

&lt;div id="element" style="position: absolute;"&gt;•&lt;/div&gt;

【讨论】：

我只得到错误：未捕获的类型错误：无法在 HTMLDocument 读取属性“样式”的 null。
我移动了代码。执行 document.getElementById("element") 时，您的元素可能不存在。现在它在每次按键时都会得到评估
还是同样的错误：/
我将尝试获取它的当前位置，将其转换为 int，添加 100，将其转换为字符串并将输出设置为元素的 style.top
错误的意思是 'document.getElementById("element")' 没有得到结果。因此该元素不存在于 dom 中或具有其他 id。

【解决方案2】：

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

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

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

【讨论】：