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属性是一个设置器，所以你必须设置它的值，如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属性参与指定已定位元素的垂直位置。它对非定位元素没有影响。确保元素的定位(绝对的、相对的、固定的、静态的等等)。

你的代码有bug:document.getElementById("element").style.top + 100;应该给元素赋值(+100)是不行的。

如果你想添加边距，那么做以下操作:document.getElementById("element").style.marginTop = "100px";