Question

我正在学习javascript并尝试做一个简单的练习：我有一个文本框，想用键盘控制它。我的HTML是以下（现在，我只是尝试1个方向）

const myBox = document.querySelector("h1");
document.addEventListener('keydown', function (event){
    if (event.keyCode == '38'){
        myBox.style.top -= 5;
        console.log("test if it works");
    }
});

我的HTML是

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <title>Tuto</title>

    <style>
        h1 {
            width: 200px;
            height: 40px;
            border: 5px solid #BADA55;
            color: #A28;
            margin: 0;
            text-align: center;
        }
    </style>
</head>
<body>

    <div><h1>My text</h1></div>

    <script type="text/javascript" src="main.js"></script>
</body>
</html>

我的控制台日志检查测试有效。事件监听器确实如此。但我的盒子不动了。我该如何解决它以及为什么我使用.style.top不正确？

谢谢

Answer 1

除非您的元素具有属性“position”为“absolute”或“relative”，否则像“top”，“bottom”，“left”和“right”这样的位置属性将不起作用。在这种情况下，你想要的是在css上为你的h1风格添加“position：relative”。

如果您想了解更多相关信息，可以为您提供一个新的开始https://www.w3schools.com/css/css_positioning.asp：D

Answer 2

要通过更改元素的最高值来移动元素，元素不能具有静态位置（默认值）。您需要将位置更改为absolute, relative, fixed, etc...。

使用Element#getBoundingClientRect获取当前的top，left等...这将为您提供正确的初始值，并且您无需解析字符串。由于top需要有一个单位（px，em等等），请将px添加到已更改的top。

const myBox = document.querySelector("h1");
document.addEventListener('keydown', function(event) {
  if (event.keyCode == '38') {
    myBox.style.top = myBox.getBoundingClientRect().top - 5 + 'px'; // parse the string to number, subtract 5, and add 'px'
    console.log(myBox.style.top);
  }
});

h1 {
  position: absolute;
  top: 0;
  left: 0;
  width: 200px;
  height: 40px;
  border: 5px solid #BADA55;
  color: #A28;
  margin: 0;
  text-align: center;
}

<div>
  <h1>My text</h1>
</div>

Answer 3

1-你必须使用让而不是 const ，因为你想要改变它并且它没有修复;

let myBox = document.querySelector("h1");

2-您必须将元素设置为绝对位置。因为 top 属性不在静态位置

position:absolute;

3-您必须将最高位置的值转换为数字，然后执行某些操作

myBox.style.top = parseFloat(myBox.style.top || 0) - 5 + 'px';

请参阅我的代码：https://codepen.io/miladfm/pen/dRNLvw

在JS中移动元素

3 个答案: