在JS中移动元素 [英] moving an element in JS
问题描述
我正在学习JavaScript，并尝试做一个简单的练习：我有一个文本框，想用键盘控制它。
我的HTML是以下内容（目前，我只是尝试1个方向）
const myBox = document。 querySelector（ h1）;
document.addEventListener（'keydown'，function（event）{
if（event.keyCode =='38'）{
myBox.style.top-= 5;
console.log（测试是否可行）;
}
}）;
而我的HTML是
<！DOCTYPE html>
< html lang = fr>
< head>
< meta charset = UTF-8>
< title> Tuto< / title>
< style>
h1 {
宽度：200像素；
高度：40像素；
边框：5像素实线＃BADA55；
颜色：＃A28;
保证金：0;
text-align：center;
}
< / style>
< / head>
< body>
< div>< h1>我的文字< / h1>< / div>
< script type = text / javascript src = main.js>< / script>
< / body>
< / html>
我的带有控制台日志的检查测试有效。因此事件监听器可以。
但是我的盒子没有动。我该如何解决以及为什么我对.style.top的使用不正确？
谢谢
要通过更改元素的最高值来移动元素，该元素不能具有静态位置（默认位置）。您需要将位置更改为 绝对，相对，固定等... 。 / p>
获取当前的顶部，左侧等。使用 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'; //将字符串解析为数字，减去5，然后添加'px'console.log（myBox.style.top）;}}）;
h1 {位置：绝对；最高：0;左：0；宽度：200像素；高度：40px；边框：5像素实线＃BADA55；颜色：＃A28；边距：0; text-align：center;}
< div> < h1>我的文字< / h1>< / div>
I'm learning javascript and trying to make a simple exercise : I have a text box and want control it with keyboard. My HTML is the following (for now, I'm just trying 1 direction)
const myBox = document.querySelector("h1");
document.addEventListener('keydown', function (event){
if (event.keyCode == '38'){
myBox.style.top -= 5;
console.log("test if it works");
}
});
and my HTML is
<!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>
My check test with console log works. So event listener does. But my box doesn't move. How can I solve it and why my use of .style.top is incorrect ?
Thank you
To move an element by changing it's top value, the element can't have a static position (the default). You'll need to change the position to absolute, relative, fixed, etc....
Get the current top, left, etc... using Element#getBoundingClientRect, which will give you the correct initial value, and save you the need to parse a string. Since top needs to have a unit (px, em, etc..), add px to the changed 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>
这篇关于在JS中移动元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
