Fatal编程技术网

Javascript 在JS中移动元素

javascript

Javascript 在JS中移动元素,javascript,addeventlistener,Javascript,Addeventlistener,我正在学习javascript并尝试做一个简单的练习：我有一个文本框，想用键盘控制它。 我的HTML如下（目前，我只是尝试一个方向） 我的HTML是 <!DOCTYPE html> <html lang="fr"> <head> <meta charset="UTF-8"> <title>Tuto</title> <style> h1 { widt

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

我的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>


图图
h1{
宽度：200px；
高度：40px；
边框：5px实心#BADA55；
颜色：#A28；
保证金：0；
文本对齐：居中；
}
我的文字
我的控制台日志检查测试正常。事件侦听器就是这样做的。 但是我的箱子不动了。如何解决此问题？为什么使用.style.top不正确

谢谢

除非元素的属性“position”为“绝对”或“相对”，否则像“top”、“bottom”、“left”和“right”这样的Positions属性将不起作用。 在这种情况下，您需要在css上为h1样式添加“position:relative”

如果您想进一步了解这一点，这可以为您提供一个起点：D

Positions属性，如“top”、“bottom”、“left”和“right”，除非您的元素的属性“position”为“absolute”或“relative”。 在这种情况下，您需要在css上为h1样式添加“position:relative”

如果您想进一步了解这一点，这可以为您提供一个headstart:D

通过更改元素的顶部值来移动元素，元素不能有静态位置（默认）。您需要将位置更改为

获取当前的
顶部
，
左侧
，等等。。。使用，这将为您提供正确的初始值，并使您无需解析字符串。由于
top
需要一个单元（px、em等），因此将
px
添加到已更改的
top
中

constmybox=document.querySelector（“h1”）；
document.addEventListener（'keydown'，函数（事件）{
如果（event.keyCode==“38”）{
myBox.style.top=myBox.getBoundingClientRect（）.top-5+'px'；//将字符串解析为数字，减去5，然后添加'px'
log（myBox.style.top）；
}
});

h1{
位置：绝对位置；
排名：0；
左：0；
宽度：200px；
高度：40px；
边框：5px实心#BADA55；
颜色：#A28；
保证金：0；
文本对齐：居中；
}



我的文字

要通过更改元素的顶部值来移动元素，元素不能有静态位置（默认）。您需要将位置更改为

获取当前的
顶部
，
左侧
，等等。。。使用，这将为您提供正确的初始值，并使您无需解析字符串。由于
top
需要一个单元（px、em等），因此将
px
添加到已更改的
top
中



constmybox=document.querySelector（“h1”）；
document.addEventListener（'keydown'，函数（事件）{
如果（event.keyCode==“38”）{
myBox.style.top=myBox.getBoundingClientRect（）.top-5+'px'；//将字符串解析为数字，减去5，然后添加'px'
log（myBox.style.top）；
}
});

h1{
位置：绝对位置；
排名：0；
左：0；
宽度：200px；
高度：40px；
边框：5px实心#BADA55；
颜色：#A28；
保证金：0；
文本对齐：居中；
}



我的文字

1-您必须使用letnot const，因为您想更改它，但它不是固定的


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


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


position:absolute;


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


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



查看我的代码：
1-您必须使用letnot const，因为您想更改它，但它不是固定的


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


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


position:absolute;


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


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



查看我的代码：
添加
myBox.style.position=“absolute”如何就在移动框的行之前？属性用于获取和设置元素的内联样式。获取时，它返回一个
CSSStyleDeclaration
对象，该对象包含该元素的所有样式属性的列表，并为元素的内联样式属性中定义的属性指定了值。“在这种情况下，将位置设置为“绝对”将搞乱元素的初始位置。我想你应该用“相对”来代替。添加
myBox.style.position=“absolute”怎么样就在移动框的行之前？属性用于获取和设置元素的内联样式。获取时，它返回一个
CSSStyleDeclaration
对象，该对象包含该元素的所有样式属性的列表，并为元素的内联样式属性中定义的属性指定了值。“在这种情况下，将位置设置为“绝对”将搞乱元素的初始位置。我认为您应该使用“relative”来代替。好的，谢谢，在（parseFloat（myBox.style.top | | | 0）-5+'px'）中，为什么要使用“| 0”？第一次
top
没有设置，所以我们需要一个默认的0。但是，我不喜欢它，所以我将它改为
元素。getBoundingClientRect（）
，它正确地获取初始值，并解析数字。请参阅编辑后的答案。好的，谢谢，在（parseFloat（myBox.style.top | | | 0）-5+'px'）中，为什么要使用“|0”？第一次
top
未设置，因此我们需要默认值0。但是，我不喜欢它，所以我将它改为
元素。getBoundingClientRect（）
，它正确地获取初始值，并解析数字。见编辑后的答案。