在JS中移动一个元素

我正在学习JavaScript，并试图做一个简单的练习：我有一个文本框，并希望用键盘控制它。我的HTML如下（现在，我只是想1方向）在JS中移动一个元素

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不正确？

谢谢

来源

2017-06-18 droledenom

如何在移动框的行之前添加'myBox.style.position =“absolute”;？ – geokavel

_“['HTMLElement.style']（https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style）属性用于获取以及设置**内联样式当获取时，它返回一个CSSStyleDeclaration对象，该对象包含该元素的所有样式属性列表，并为在元素的内联样式属性**中定义的属性指定值。“_ – Andreas

在这种情况下，将位置设置为“绝对”会使元素的初始位置变得混乱，我认为您应该使用'relative'。 –

要通过改变它的顶部值移动元素，该元素不能有一个静态的位置（默认）。您需要将位置更改为absolute, relative, fixed, etc...。

获取当前top，left等...使用Element#getBoundingClientRect，它会给你正确的初始值，并且保存你需要解析的字符串。由于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>

来源

2017-06-18 17:21:54

好的，谢谢，在（parseFloat（myBox.style。顶|| 0） - 5 +'px'），为什么使用“| 0”？ – droledenom

第一次'top'没有设置，所以我们需要一个默认的0.然而，我不喜欢它，所以我已经将它改为'Element.getBoundingClientRect（）'，它获得了初始值，并且解析数字。见编辑的答案。 –

职位性质类似“顶”，“底”，“左”和“右”是行不通的，除非你的元素有属性“位置”为“绝对”或“相对”。在这种情况下，你想要的是在css上添加“position：relative”到你的h1风格。

如果您想了解更多有关，这可以给你一个领先地位https://www.w3schools.com/css/css_positioning.asp：d

来源

2017-06-18 17:19:01

1，你必须使用让没有常量，因为你想改变它，它不能修复;

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

2 - 你有你的元素设置为绝对位置。因为顶部物业工作不能在静态位置

position:absolute;

3-你必须顶部位置的值转换为数字，然后做一些

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

看到我的代码：https://codepen.io/miladfm/pen/dRNLvw

来源

2017-06-18 17:31:44 miladfm

在JS中移动一个元素

回答

相关问题